跟踪鼠标移动图像的位置

我有一个非常简单的页面。跟踪鼠标移动图像的位置

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

造型也很简单。

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

我使用％，因此如果浏览器窗口调整大小，图像可以按比例调整大小。不要管那个。

问题是，我试图效仿这个Flash网站上的效果：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范围）移动我的鼠标，图像将略微向左移动，但是当我移动我的鼠标从中心的权利，图像仍然向左移动！它应该向右移动到原来的位置，但这并不是因为网络不知道鼠标是从右向中心还是从中心向右移动。

任何帮助？

来源

2011-02-09 Henson

我很快就玩弄了它，它没有通过.each循环图像，但可能会帮助您进行鼠标移动计算。由于较低的z-索引项目移动得更多，因此运动分割器应该基于z-索引而不是硬编码。

在本演示中，直到鼠标悬停为止，初始放置位置不正确。

演示在这里：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' }); 
      }); 
     });

来源

2011-02-09 21:22:12 Tev

跟踪鼠标移动图像的位置

回答

相关问题