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

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

Can something like this be done with a code as short as the jQuery version?

在这种情况下，几乎是的，因为所做的事情相当简单，并且只使用了少量的 jQuery 功能。具体来说:

• 它正在 Hook document 上的 mousemove 事件，这可以很容易地用 addEventListener 完成。 (或旧版 IE 上的 attachEvent)。

• 它通过id ($("#follower")) 定位一个元素，这可以很容易地用getElementById 完成。 .

• 它通过 jQuery 的 css 函数设置元素的 left 和 top 。这可以通过在元素的 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);

如您所见，最大的问题是以一种与其他人很好地配合的方式 Hook 事件。尽管您可以只使用 document.onmousemove 版本，但这会破坏 document 上的任何其他 mousemove 处理程序，这这就是我们首先寻找 addEventListener 或 attachEvent 的原因。

一些方便的引用，大致按时间顺序排列(后面的更新/取代/添加到前面的):

• > DOM2 Core
• > DOM2 HTML
• > DOM2 Events
• > DOM3 Core
• > DOM3 Events
• > Other DOM specs
• > HTML5 Web Application APIs

这些都不应该说你不能使用像 jQuery 这样的好库，有几个很好的理由(上面的事件只是一个例子)。但最好也了解基础知识，即使您使用库来避免与它们打交道。