Javascript动画效果（4）

2019-11-20 08:46:41

字体：大中小

来源：转载

供稿：网友

前面我们自己写了一个小小的关于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的异同点，如图：