Question

我发现这个“div跟随鼠标”动画： JSFiddle属于答案：How to animate following the mouse in 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);

我对内部工作非常感兴趣，并试图理解代码在做什么。我目前正在学习javascript，我试图复制“点对点”动画。我发现了这个：Point to point animation algorithm，但感觉原始海报的代码很长很重复。

我目前基本的javascript级别是完全理解jQuery版本的障碍（我仍然没有进入jQuery领域）。然而，我认为用javascript中的这种动画可能是可能的，但我能想到的唯一方法是使用类似于“点对点”链接的代码。

使用像jQuery版本一样简短的代码可以完成这样的事情吗？或者只是javascript需要更长的例行程序？

感谢您提出任何建议或评论！

Answer 1

使用像jQuery版本一样简短的代码可以完成这样的事情吗？

在这种情况下，差不多，是的，因为正在完成的工作非常简单，只使用了少量的jQuery功能。具体做法是：

它正在mousemove挂起document事件，可以使用addEventListener（或旧版IE上的attachEvent）轻松完成。
它正在按id（$("#follower")）找到一个元素，可以使用getElementById轻松完成。
它通过jQuery的left函数设置元素的top和css。这可以通过在元素style property上设置left和top属性轻松完成。

将所有这些放在一起：Fiddle

var mouseX = 0, mouseY = 0;
if (document.addEventListener) {
    document.addEventListener('mousemove', mouseMoveHandler, false);
}
else if (document.attachEvent) {
    document.attachEvent('onmousemove', mouseMoveHandler);
}
else {
    document.onmousemove = function(event) {
        mouseMoveHandler(event || window.event);
    };
}

function mouseMoveHandler(e) {
   mouseX = e.pageX;
   mouseY = e.pageY; 
}

// cache the element
var follower = document.getElementById("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.style.left = xp + "px";
follower.style.top  = yp + "px";

}, 30);

正如您所看到的，最大的问题是以一种与其他人相处得很好的方式挂钩事件。虽然您可以只使用document.onmousemove版本，但这会破坏mousemove上的任何其他document处理程序，这就是我们首先查找addEventListener的原因或attachEvent。

一些方便的引用，大致按时间顺序排列（后者更新/取代/添加到早期的中）：

不应该说你不能使用像jQuery这样的好库，有几个很好的理由（上面的事件只是一个例子）。但是，即使您使用库来避免必须处理它们，也总是最好理解基础知识。

jquery中的这个动画可以在没有jquery的情况下在JS中完成并且仍然保持简洁吗？

1 个答案: