8

マウスがその div 内にあるときに、カーソルの横に小さな円形のマーカーが表示される div を使用できるようにしたいと考えています。この div の外に移動すると、カーソル マーカーが削除され、非表示になります。

私が欲しいものの例を見つけましたが、正確に必要なものではありません: -

http://jsfiddle.net/3964w/3/

上記の問題: - その div 内にいるときにのみ黄色のマーカーを表示したい - その div の外にいるとき、マーカーは非表示になり、カーソルは正常です。- マウスを動かしたときにマーカーがカーソルから離れすぎている

何か案は？

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
$(window).mousemove(function(e){
 mouseX = Math.min(e.pageX, limitX);
 mouseY = Math.min(e.pageY, limitY);
});

// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
// change 12 to alter damping higher is slower
xp += (mouseX - xp) / 12;
yp += (mouseY - yp) / 12;
follower.css({left:xp, top:yp});

}, 30);

ありがとう

4

5 に答える 5

3

css使えないの？このようなもの: http://jsfiddle.net/felipemiosso/3964w/30/

追加display:none;し#followerて新しいスタイルを作成しました.centerdiv:hover #follower { display:block; }

カーソルが停止したときにポインターを固定するにmargin-left:-8px; margin-top:-8px;は、#follower.

更新されたフィドル http://jsfiddle.net/felipemiosso/3964w/35/

更新されたフィドル 2 http://jsfiddle.net/felipemiosso/3964w/41/

于 2013-11-04T15:32:15.217 に答える
1

次のようなことができますdisplay: none。フォロワーの css に追加してから: http://jsfiddle.net/3964w/32/

$('.container').mousemove(function(e){
$("#follower").show();
  var offset = $('.container').offset();

   mouseX = Math.min(e.pageX - offset.left, limitX);
   mouseY = Math.min(e.pageY - offset.top, limitY);
   if (mouseX < 0) mouseX = 0;
   if (mouseY < 0) mouseY = 0;
});

$('.container').mouseleave(function() {
        $("#follower").hide(); 
});
于 2013-11-04T15:33:22.663 に答える
1

問題は、30 ミリ秒ごとに呼び出される setInterval 関数にありonmousemove、div で when を使用して座標を取得します。そしてフォロワーを表示しmouseenterます。隠れるmouseleave

于 2013-11-04T15:33:32.163 に答える