jqueryのマウスを追跡する方法
-
27-10-2019 - |
質問
わかりました、これは私のマウスをフォローするために完全に正常に機能します。
//
$(document).mousemove(function(e){
$("#follower").css({
'top': e.pageY + 'px';
'left': e.pageX + 'px';
});
});
//
そして、これはマウスをクリックポイントにアニメーション化するのに最適です
//
$(document).click(function(e){
$("#follower").animate({
top: e.pageY + 'px';
left: e.pageX + 'px';
}, 800);
});
//
しかし、私は個人的には論理的にこれがうまくいくはずだと感じています! WebScripterとしての私の観点から来ます。 AMDは、私の質問です。どうすればこれを機能させることができますか。 #Followerに、感触の背後にダイナミックな種類の遅れをとって、マウスをフォローしようとします。
//
$(document).mousemove(function(e){
$("#follower").animate({
top: e.pageY + 'px';
left: e.pageX + 'px';
}, 800);
});
//
解決
SetIntervalとZeno's Paradoxと呼ばれる方程式を使用してみませんか:
それが私がいつもそれをする方法です。
要求に応じて、この回答にコードを含めました。絶対的なポジショニングを備えたdivを与えられます:
CSS:
#follower{
position : absolute;
background-color : red;
color : white;
padding : 10px;
}
HTML:
<div id="follower">Move your mouse</div>
js w/jquery:
var mouseX = 0, mouseY = 0;
$(document).mousemove(function(e){
mouseX = e.pageX;
mouseY = e.pageY;
});
// 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);
所属していません StackOverflow