javascript – 如何在jquery中按照鼠标进行动画

前端之家收集整理的这篇文章主要介绍了javascript – 如何在jquery中按照鼠标进行动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
好的,这对于跟随我的鼠标非常好.
//
$(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.那么我的问题是,我该怎么做这个工作.我想要#follower尝试跟随我的鼠标与一种动态的落后感觉.

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

解决方法

如何使用setInterval和一个称为zeno的悖论的方程式:

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

猜你在找的jQuery相关文章