跟踪鼠标位置以移动图像 [英] track mouse position to move images

问题描述

我有一个非常简单的页面。

I have a pretty simple page.

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

样式也很简单。

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

我使用％，因此如果浏览器窗口调整大小，可以按比例调整图像大小。没关系。

I use % so the image can be resized proportionally if the browser window resizes. Never mind that.

问题是，我正试图模仿这个Flash网站上的效果： http://www.tatogomez.com/ 因此图像位于屏幕的右下角。当我将鼠标移动到左上角时，图像会稍微向右移动一点。当我将鼠标移动到中心时，图像将恢复到原始位置。所以它有点像我给阴影/灯光效果，其中鼠标是灯光，图像是对象，除了我只需要移动动画。

The problem is, I'm trying to emulate the effect on this flash site : http://www.tatogomez.com/ So the image is in the bottom right of the screen. When I move my mouse to top left, the image will slightly move a bit more to the right bottom. When I move my mouse to center, the image will revert back to its original position. So it's kinda like I'm giving a shadow/lighting effect where the mouse is the lighting and the image is the object, except I only need the moving animation.

my代码是这样的

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

        }
    );
});

所以如果我相对于屏幕中心移动鼠标。所以基本上是这样的：

so if I move the mouse in relation to the center of the screen. So basically it's like this:

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范围），图像会稍微向左移动，但是当我将鼠标从右侧移动到中心时，图像仍会向左移动！它应该向右移动到其原始位置，但它不会因为网络不知道鼠标是从右向中移动还是从中向右移动。

then i realizes if i move my mouse from the center to the right (700-1400 range), the image will slightly move to the left, but when I move my mouse from the right to the center, the image still moves to the left! It should move to the right to its original position, but it doesn't because the web doesn't know whether the mouse moves from right to center or from center to right.

任何帮助？

推荐答案

我很快就玩弄了它，它缺少使用.each循环显示图像但可能会帮助你鼠标移动计算。运动分频器应该基于z-index，而不是硬编码，因为较低的z-index项目移动更多。

I toyed with it quickly, it's lacking the looping through images with .each but might help you with the mouse movement calculations. Rather than being hardcoded, the movement divider should probably be based on the z-index, since lower z-index items move more.

在此演示中，初始放置不正确直到你将鼠标移开。

In this demo, initial placement is incorrect until you mouse over.

在这里演示： 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 .jpgid =image1alt =/>
< img src =http://farm6.static.flickr.com/ 5138 / 5421580531_424e84d4cf_m.jpgid =image2alt =/>
< img src =http://farm6.static.flickr .com / 5138 / 5421580531_424e84d4cf_m.jpgid =image3alt =/>
< img src =http：// farm6。 static.flickr.com/5138/5421580531_424e84d4cf_m.jpgid =image4alt =/>
< img src =http：/ /farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpgid =image5alt =/>
< / div>

JQUERY：

$(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' });
            });
        });

这篇关于跟踪鼠标位置以移动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！