JavaScript实现动画效果

在一些动画设置中，我们可以用CSS中已有的动画属性方便的设置动画效果，比如说animation动画，transition过渡，它们结合一些2D，3D变换可以达到可观的动画效果，但是涉及到更多更加复杂的动画这个时候我们还要基于JavaScript实现。在这里我们定义一个JavaScript中一个实用的函数以便今后的设置。

动画的设置是在一个连续间隔的时间内，变换关键帧，在人眼的视觉暂留下连续起来。这个时间间隔如何实现？时间间隔的实现依赖于setTimeout定时器API，今后的动画设置也将基于这个API。

我们可以像清除浮动那样清除定时器，用clearTimeout(variable). 使用方法：先将定时器赋值给一个变量，然后将这个变量作为clearTimeout的参数：

这样一来定时就被解除了.

既然有了定时器，我们就能基于定时器API来设置动画了。如何设置动画？我们需要在间隔时刻改变目标的位置，直到到达终点，只要这个间隔足够小，人眼就会将其视为连续的平滑动画。我决定定义一个moveElement函数，在间隔时刻改变目标的位置直到到达终点：

这个函数用简单的递归调用实现。我们要注意一个问题，就是elem.style属性是elem标签的内联样式，而不是css中的id,class中的属性。一旦想使用style未初始化那么这个时候style中变量的值为NAN，所以想使用style中变量的值，有两个办法： （1）行内初始化：

（2）DOM初始化 我们定义一个初始化的函数，用这个函数给style属性初始化，或者直接在moveElement函数内部初始化：

以上我们得到了一个动画函数，这个函数可以使我们的元素沿着任意方向移动，现在我们利用这个函数做一些更加是用的应用来增强我们的网页。 我们仍然看图片库这个例子：图片库 我们想当鼠标悬停在某个图片上时，下方的图片会更新，这样一来我们就能有一个预览效果。有一个简单的处理方法——将onclick改为onmouseover这样鼠标悬停就会得到响应。

但是这样处理的缺点是响应不够顺畅，因为需要将新的图片加载上去难免会花费时间，我们想要的是更快更流畅的效果：

现在整张图片都是可见的，我们想只展示一个400px宽，300px高的固定区域，而隐藏其他区域。用JavaScript无法做到这一点，但是我们可以用CSS的overflow属性来设置： 盒子模型溢出处理overflow

现在我们可以将其余部分隐藏了，但是要达到浏览的效果，我们必须能够将其他部分展现出来。可以给图片设置一个偏移的效果，这样一来就能浏览到其他区域了，如何设置偏移呢?也许你会想到style.backgroundPositionX属性，但是这里我们用前面定义的动画函数moveElement. HTML

JavaScript：

在上面的过程中我们历遍所有超链接，并且当鼠标悬浮在图片上方时，给长图设置偏移的动画moveElement，注意不能用循环处理，因为循环是一次性的，不能达到任意时刻悬浮都能移动的效果！乍一看移动效果是实现了，但是似乎有一些问题，当两个方向的图片都被悬浮的时候，图片没有移动而是来回振动，问题出在哪？ 积累事件： 当图片被鼠标悬停时，moveElement函数被调用，movement计时器执行，而另一张图片被悬停时，第二个movement计时器也被执行，这个时候图片就无法确定执行谁，从而出现了错乱。 清除积累事件 我们想在moveElement函数内部添加一些东西，moveElement执行的时候，要将已有的timer清除：

JavaScript允许我们创建新的属性：elem.property=value 我们可以给元素设置属性timer，如果存在属性那么就清除，否则直接执行：

添加属性值的方法似乎更为安全，封装好的moveElement函数非常具有使用意义。

我们的moveElement函数每次前进1px，你是否感觉太过于单调？现在我想给它设置一些变化，根据区域到目标的距离来变换，距离越远变化越快，越近变化越慢：

这将会是一个不错的选择

前面的slidShow区域是专门为JavaScript服务的，考虑平稳退化时，JavaScript如果不被支持那么网页是否能够平稳退化？但暗示不会，当网页禁用JavaScript，我们的区域将会是一个不可更改的区域，这样的区域将毫无用处因为他的图片是固定的，这意味着我们未能平稳退化，所以我们要将JavaScript完全分离： HTML：

JavaScript：

可以达到同样的效果：