0

jQuery mousemove を使用してカーソルを画像で追跡しています (これは 1 つの 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 軸を与えています (そして、画像はカーソルから本当に離れています)。そして今、ユーザーがより大きな画面を持っている場合、カーソル位置を変更するために、margin-left auto がページ全体を移動したピクセル数を知る必要があります ( $(".follow").css({left:e.pageX-690, top: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

代わりにこれを試してください...

ここに作業フィドルがあります 

$("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 に答える