Javascript动画效果(4)

之前，我们写过一个关于js动画的小插件。现在，让我们使用前面的框架来实现我们想要的动画效果。我们经常在淘宝上看到，当鼠标经过一张图片时，图片有从上往下滚的效果。这种效果是如何实现的？

首先，我们完成html和css代码的这个效果，代码如下：html部分代码：

div id=' move ' a href=' # ' Iimg src=' http : images/1 . jpg '/IP抽奖/p/a href=' # ' Iimg src=' http 3360 images/2 . jpg '/IP movie/p/a href=' # Iimg src=' http : images/3 . jpg '/IP点传送/p/a href=' # ' Iimg src=' http 3360 images/4。a a href=' # ' iimg src=' http : images/7 . jpg '/IP music/p/a a href=' # ' iimg src=' http : images/8 . jpg '/IP水、煤和电/p/a href=' # ' iimg src=' http 33 '

* { margin : 0；padd : 0；} # move { padding: 10px宽度： 400 px；背景-color : # F4 F4；margin: 10px自动；border: 1px固体# cccborder-radius : 10px；} #移动一个{ color : # 3c 3c；display:内联块；宽度： 58px；高度： 25px；border: 1px固体# dddborder-radius : 3px；背景-color : # fff；margin: 10px 17px相对位置：填充-top : 40px；font-size : 12px；文本装饰：无；线高： 25px；飞越：隐藏；} #移动一个i { position: absolutetop: 10pxleft : 0；display:内联块；宽度： 100%；文本对齐：中心；滤镜：alpha(不透明度=100)；opacity:1} #移动p{ text-align:居中；} #移动a:hover { color: # F40} #移动img { border: none}[用自制动画js插件实现]

首先要介绍一下我们的插件：foodoir.animate.js，然后就可以写出我们想要的动画效果了。代码如下：

window . onload=function(){ var oMove=document . getelementbyid(' move ')；var oA=omove . getelementsbytagname(' a ')；for(var I=0；i oA.lengthi ) { oA[i]。onmouseenter=function(){ var _ this=this . getelementsbytagname(' I ')[0]；startMove(_this，{ top: -15，opacity: 0 }，function(){ _ this . style . top=20 ' px '；startMove(_this，{ top: 10，opa city 3360 100 })；});} }};注意：这里我们使用onmouseenter而不是onmouseout，以防止鼠标事件被多次触发。另外，在执行后一个函数之前，我们先把I的位置放到top:20px的位置，这样就能看到滚动效果，代码：_ this . style . top=20 ' px '；

[用jquery框架实现]

在介绍了官方jquery框架之后，我们编写了以下代码：

$(文档)。ready(function() { $('#move a '))。mouseenter(function() { $(this))。查找(' I ')。animate({ top: '-15px '，opacity: ' 0 ' }，300，Function () {$ (this)。CSS ({top:' 20px'}) $ (this)。animate ({top:' 10px '，opacity: ' 1 ' }，200)})接下来，我们通过一张图片比较jquery和原生js

差异：

1.两种加载方式的写法不同，都是$(document)。jquery中的ready()和本机js中的window.onload=function(){}。

2.因为jquery封装了许多方法，所以在它们之间获取元素的方法是不同的，它们是$(.)和原生js中的DOM运算符。

3.jquery之后，我们立即通过$(this)获得所有需要更改的I。find('i ')函数。在本机js中，我们还需要通过for方法遍历所需的I；

4.在jquery中，mouseenter后面跟一个函数，但是用户在函数中获取I，然后对I进行相应的操作(看起来我们看到的代码并没有涉及到操作是否对应具体的I)，而在原生js中，先获取‘I’，然后执行onmouseenter事件，对应一个函数，具体的I应该在当前函数中进一步获取；

5.在jquery中，动画由动画函数控制，由jquery封装，而在原生js中，动画由startMove函数控制，startMove使我们自己封装在foodoir.animate.js的一个函数中；

6.虽然json是用来传递值的，但是传递的值是不同的(比如有单位和没有单位)，这和我们自己打包的插件有关；

7.在jquery中，还有一个额外的值300(200)，代表jquery中的速度，我们的插件直接封装了速度。如果想再次改变运动速度，需要在foodoir.animate.js中进行修改；

相似之处：

1.它是在页面加载后完成的

2.对于同步移动，json用于值传输

总结：在这里，我们可以清楚地看到，编写jquery代码比原生js代码要少得多，方便得多。未来可以先研究原生js的实现方法，然后再思考为什么要这样实现jquery，这样可以更快地学习，知道的东西越多，出错的概率就越小。其次，与jquery相比，我们之前的插件还需要改进。

在这里我们的Javascript动画已经告一段落，新的需求还会继续更新~

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。