Javascript动画效果（四）

Javascript动画效果（四）

前面我们自己写了一个小小的关于js动画的插件，下面我们来使用之前的框架来完成我们想要的动画效果。我们经常在淘宝网中看到，鼠标经过某一图片时，该图片有从上滚出而又从下滚入的效果，那么那种效果是如何实现的呢？

首先我们我们完成该效果的html和css代码，代码如下：

html部分代码:
<div id="move">
	<a href="#"><i><img src="images/1.jpg"/></i><p>彩票</p></a>
	<a href="#"><i><img src="images/2.jpg"/></i><p>电影</p></a>
	<a href="#"><i><img src="images/3.jpg"/></i><p>点外卖</p></a>
	<a href="#"><i><img src="images/4.jpg"/></i><p>理财</p></a>
	<a href="#"><i><img src="images/6.jpg"/></i><p>找服务</p></a>
	<a href="#"><i><img src="images/7.jpg"/></i><p>音乐</p></a>
	<a href="#"><i><img src="images/8.jpg"/></i><p>水煤电</p></a>
	<a href="#"><i><img src="images/9.jpg"/></i><p>火车票</p></a>
</div>

css部分代码:
*{ margin: 0; padding: 0; }
#move{ padding: 10px; width: 400px; background-color: #f4f4f4; margin: 10px auto; border: 1px solid #ccc; border-radius: 10px; }
#move a{ color: #3c3c3c; display: inline-block; width: 58px; height: 25px; border: 1px solid #ddd; border-radius: 3px; background-color: #fff; margin: 10px 17px; position: relative; padding-top: 40px; font-size: 12px; text-decoration: none; line-height: 25px; overflow: hidden; }
#move a i{ position: absolute; top: 10px; left: 0; display: inline-block; width: 100%; text-align: center; fliter:alpha(opacity=100); opacity:1; }
#move a p{ text-align: center; } #move a:hover{ color: #F40; }
#move 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.length; i++) {
		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,
					opacity: 100
				});
			});
		}
	}
};

 注意：在这里我们用的是onmouseenter代替onmouseout，目的是防止鼠标事件的多次触发。另外在执行后一个函数之前，我们先让i的位置到top:20px位置处，这样我们看到的将是滚动效果，代码：_this.style.top = 20 + 'px';

【用jquery框架来实现】

我们引入官方jquery框架后，写如下代码：

$(document).ready(function() {
	$('#move a').mouseenter(function() {
		$(this).find('i').animate({
			top: "-15px",
			opacity: "0"
		}, 300, function() {
			$(this).css({
				top: "20px"
			})
			$(this).animate({
				top: "10px",
				opacity: "1"
			}, 200)
		})
	})
})

 下面我们通过一张图片来比较jquery和原生js的异同点，如图：不同点：

1、两种方法的加载方式的写法不同，在jquery中是$(document).ready()，而在原生js中是window.onload = function(){};

2、由于jquery对很多方法进行了封装，二者间获取元素的方法也不同，在jquery中是$(...)，而在原生js中是DOM操作符来获取；

3、紧跟着jquery通过$(this).find('i')函数就将所有需要改变的i得到了，在原生js中，我们还需要通过for方法来遍历所需要的i；

4、在jquery中是mouseenter后接函数，然户在函数中获取i然后对i进行相应操作（我们所看到的代码中好像不涉及操作是否对应了具体的i），而在原生js中是先获取到‘i’，然后进行onmouseenter事件，其对应的是一个函数，且在当前函数中要进一步获取到具体的i；

5、在jquery中是通过animate函数来控制动画，这个是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动画就告一段落了，后面有新的需求会继续更新~