Question

我正在使用jQuery mousemove按照图像跟踪（我只为一个div做这个）。我整个页面居中（margin-left：auto; margin-right：auto;）。但问题出现了：

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

e.pageX给出的不是主div的x轴，而是整页x轴（并且图像离光标很远）。现在，如果用户有更大的屏幕，那么我必须知道有多少像素，左边缘自动移动整页，更改光标位置（$（“。follow”）。css（{left：e.pageX-690，顶部：e.pageY-30}））。任何想法？

P.S。我的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的问题，当鼠标移动时，图像跟随它，但如果鼠标在整个图像中移动则图像不跟随光标

Answer 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'元素。

FIDDLE

如何从左侧知道左边缘的自动像素？

1 个答案: