отслеживать положение мыши для перемещения изображений

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); 
       } 
      ); 

     } 
    ); 
}); 

так что если я двигаю мышь по отношению к центру экрана. Так что в основном это так:

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. 

тогда я понимаю, если я двигаю мышь от центра вправо (700-1400 диапазона), изображение будет немного двигаться влево, но когда я двигаю мышь от право на центр, изображение все равно перемещается влево! Он должен двигаться вправо до своего исходного положения, но это происходит не потому, что сеть не знает, перемещается ли мышь с правой на центр или из центра вправо.

Любая помощь?

Answer 1

Я быстро поиграл с ним, ему не хватает петли через изображения с помощью .each, но может помочь вам с расчетами движения мыши. Вместо того, чтобы быть жестко закодированным, делитель движения должен, вероятно, основываться на 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' }); 
      }); 
     });