2

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

​</p>

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

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

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

感谢您提出的任何建议或意见！

4

1 回答 1

4

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

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

  • mousemove它将事件挂钩document，这可以很容易地使用addEventListener（或attachEvent旧版本的 IE）来完成。

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

  • 它通过 jQuery 的函数设置元素的leftand 。这可以通过在元素的property上设置和属性来轻松完成。topcsslefttopstyle

把这一切放在一起：小提琴

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，这就是我们首先寻找addEventListeneror的原因attachEvent。

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

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

于 2012-12-01T10:19:16.373 回答