jquery中如何制作跟随鼠标的动画

发布于 2024-10-15 04:52:01 字数 625 浏览 3 评论 0原文

好的，这非常适合跟随我的鼠标。

//
$(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);
});
//

，但我个人认为从逻辑上讲这应该有效！从我作为网络脚本编写者的角度来看。然后我的问题是，我怎样才能做到这一点。我希望 #follower 尝试以一种动态的滞后感跟随我的鼠标。

//
$(document).mousemove(function(e){
  $("#follower").animate({
      top: e.pageY + 'px';
      left: e.pageX + 'px';
  }, 800);
});
//

原文

OK, this works perfectly fine for following my mouse.

//
$(document).mousemove(function(e){
  $("#follower").css({
      'top': e.pageY + 'px';
      'left': e.pageX + 'px';
  });
});
//

And this works great for animating the mouse to a clicked point

//
$(document).click(function(e){
  $("#follower").animate({
      top: e.pageY + 'px';
      left: e.pageX + 'px';
  }, 800);
});
//

But I personally feel that logically this SHOULD work! Coming from my point of view as the webscripter. Amd then my question is, how can I make this work. I want the #follower to try and follow my mouse with a dynamic kind of lagging behind feel.

//
$(document).mousemove(function(e){
  $("#follower").animate({
      top: e.pageY + 'px';
      left: e.pageX + 'px';
  }, 800);
});
//

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

铁憨憨 2024-10-22 04:52:01

如何使用 setInterval 和一个名为芝诺悖论的方程：

http://jsfiddle.net/88526/1/

我通常就是这么做的。

根据要求，我已在此答案中包含代码。给定一个具有绝对定位的 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);

How about using setInterval and an equation called zeno's paradox:

http://jsfiddle.net/88526/1/

That's the way I usually do it.

As requested, I've included the code in this answer. Given a div with absolute positioning:

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);

回复收藏 0 原文

~没有更多了~