0

我正在使用 jQuery mousemove 逐个图像跟踪光标（我只为一个 div 执行此操作）。我将整个页面居中（左边距：自动；右边距：自动；）。但是问题来了：

$('.friendSelection').mousemove(function(e){
                $('.follow').show();
                $(".follow").css({left:e.pageX-690, top:e.pageY-30});});

e.pageX 给出的不是主 div 的 x 轴，而是整个页面的 x 轴（并且图像离光标真的很远）。现在如果用户有更大的屏幕，那么我必须知道有多少像素，margin-left auto 移动了整个页面，以更改光标位置（ $(".follow").css({left:e.pageX-690,顶部：e.pageY-30}））。有任何想法吗？

PS我的html代码：

<html>
<body>
<div class="mainBody">
<div class="friendSelection">
<div class="friend" id="1"></div>
<div class="friend" id="2"></div>
<div class="friend" id="3"></div>
</div>
<div class="follow"></div>
</div>
</body>
</html>

那些朋友类总是从上到下下降，这是我的跟随图像是 115x185px 并且当鼠标移动时图像跟随它，但是如果鼠标在整个图像中移动则图像不跟随光标

4

1 回答 1

1

试试这个...

这是一个有效的FIDDLE 

$("body").on({

    mousemove: function(e){
         $('.follow').fadeIn(500).css({'left' : e.pageX, 'top' : e.pageY});
     },

    mouseout: function(e){
         $('.follow').fadeOut(500);
     }

}, ".friendSelection" );

您还可以将“.follow”元素放在光标的中心，并将此功能用于多个“.friendSelection”元素。

小提琴

于 2012-11-13T02:45:06.923 回答