画像を移動するトラックのマウスの位置

Question

私はかなり単純なページを持っています。

<div id="index"> 
    <img /> 
</div> 

スタイリングもかなり簡単です。

#index {position:relative;} 
#index img {position:absolute; bottom:10%; right:10%; width:100%;} 

私は％を使用しているので、ブラウザウィンドウのサイズが変更された場合、画像は比例してサイズ変更できます。決して気にしないでください。

問題は、このフラッシュサイトでこのエフェクトをエミュレートしようとしています。http://www.tatogomez.com/画像は画面の右下に表示されます。マウスを左上に動かすと、画像がちょっと右に移動します。マウスを中央に動かすと、画像は元の位置に戻ります。だから、ちょっと動くアニメーションだけが必要な場合を除いて、マウスが照明であり、イメージがオブジェクトである場合、影/照明効果を与えているようです。

私のコードは、私は、画面の中央に関連して、マウスを移動している場合は、この

$(document).ready(function($){ 
    $('#index').mousemove(
     function(e){ 
      $(this).children('img').each(
       function(){ 
        var totalWidth = $(window).width(); 
        var totalHeight = $(window).height(); 
        var centerX = $(window).width()/2; 
        var centerY = $(window).height()/2; 

        var mouseX = e.pageX; 
        var mouseY = e.pageY; 

        var current_top = $(this).offset().top; 
        var current_left = $(this).offset().left; 

        var myX = (centerX-mouseX)/centerX; 
        var myY = (centerY-mouseY)/centerY; 
        var cssObj = { 
         'left': current_left + myX + 'px' 
         'top': current_top + myY + 'px' 
        } 
        $(this).css(cssObj); 
       } 
      ); 

     } 
    ); 
}); 

のようなものです。その後、私は右（700から1400の範囲）に中央から私のマウスを移動すると、画像が少し左に移動します実現

centerX = 700 (i use resolution 1400); 
currentLeft = ~200 (the offset left of my image) 

So if my mouse position is at 700-1400, then the myX will be 700(centerX) - 900(mouse position) = -200/700 = ~ -0.3. Add it into the css calculation, the left will be current_left(200) + myX(-0.3) px = 197.7px. 

、私はから私のマウスを移動すると：だから、基本的にはこのようなものですセンターへの権利、画像はまだ左に移動！それは元の位置に右に移動する必要がありますが、ウェブがマウスが右から中央に、または中央から右に移動するかどうか分からないためではありません。

助けが必要ですか？

Answer 1

私はそれをすばやく試してみましたが、それぞれの画像をループしていませんが、マウスの動きの計算に役立つかもしれません。ハードコーディングされているのではなく、z-indexの項目がより低くなるので、動きディバイダーはおそらくz-indexに基づいているはずです。

このデモでは、マウスオーバーするまでの最初の配置は正しくありません。ここ

デモ：http://jquerydoodles.com/stack_question.html

希望に役立ちます！

CSS：

#index { position: relative; border: 2px solid #ccc; height: 400px; } 
    #index img { position: absolute; background-color: #fff; border: 1px solid #666; padding: 6px; } 
    #image1 { z-index: 3; } 
    #image2 { z-index: 2; width: 150px; left: 200px; } 
    #image3 { z-index: 1; width: 100px; left: 300px; } 
    #image4 { z-index: 2; width: 150px; left: -200px; } 
    #image5 { z-index: 1; width: 100px; left: -300px; } 

HTML

<div id="index"> <img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image1" alt="" /> <img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image2" alt="" /> <img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image3" alt="" /> <img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image4" alt="" /> <img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image5" alt="" /> </div>

JQ UERY：

$(document).ready(function($){ 
      $("#index").mousemove(function(e){ 
       var mouseX = e.pageX - $('#index').offset().left; 
       var mouseY = e.pageY - $('#index').offset().top; 
       var totalX = $('#index').width(); 
       var totalY = $('#index').height(); 
       var centerX = totalX/2; 
       var centerY = totalY/2; 
       var shiftX = centerX - mouseX; 
       var shiftY = centerY - mouseY; 

       var startX = ($('#index').width()/2) - ($('#image1').width()/2); 
       var startY = ($('#index').height()/2) - ($('#image1').height()/2); 

       $('#image1').css('z-index') ; 
       $('#image1').css({ 'left': startX + (shiftX/10) + 'px', 'top': startY + (shiftY/10) + 'px' }); 
       $('#image2').css({ 'left': startX + 220 + (shiftX/8) + 'px', 'top': startY + 50 + (shiftY/8) + 'px' }); 
       $('#image3').css({ 'left': startX + 370 + (shiftX/6) + 'px', 'top': startY + 60 + (shiftY/6) + 'px' }); 
       $('#image4').css({ 'left': startX - 100 + (shiftX/8) + 'px', 'top': startY + 50 + (shiftY/8) + 'px' }); 
       $('#image5').css({ 'left': startX - 150 + (shiftX/6) + 'px', 'top': startY + 60 + (shiftY/6) + 'px' }); 
      }); 
     });