<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style type="text/css"> *{margin: 0;padding: 0;} a{width: 100px; height: 100px; margin-top:20px; margin-right: 20px; border: 2px solid #000;position: relative; float: left; list-style: none; display: inline-block;} a img{border: none; width: 30px; height: 30px;} a i{ width: 100%; position: absolute;top:20px;left: 0;display: inline-block; text-align: center;filter:alpha(opacity=100); opacity: 1; } a p{ text-align: center; position: absolute; bottom: 0; width: 100%} </style> <script type="text/javascript"> window.onload=function(){ var omove=document.getElementById('move'); var oli=omove.getElementsByTagName('a') for (var i = 0; i < oli.length; i++) { oli[i].onmouseover=function(){ var _this=this.getElementsByTagName('i')[0] startmove(_this,{top:-25,opacity:0},function(){ _this.style.top=25+'px' startmove(_this,{top:20,opacity:100}) }) } } } function getstyle(obj,attr){ if (obj.currentStyle) { return obj.currentStyle[attr] } else{ return getComputedStyle(obj,false)[attr] }; } //statrtmove(obj,{attr1:tg1,attr2:tg2},fn) function startmove (obj,json,fn) { var flag = true clearInterval(obj.timer) obj.timer=setInterval(function() { for (var attr in json ){ //1取当前值 var cur=0 if (attr=='opacity') { cur=Math.round(parseFloat(getstyle(obj,attr))*100) } else{ cur=parseInt(getstyle(obj,attr)) }; //2算速度 speed= (json[attr]-cur)/8 speed=speed>0?Math.ceil(speed):Math.floor(speed) //3检测停止 if (cur!=json[attr]) { flag = false } if (attr=='opacity') { obj.style.filter='alpha(opacity:'+(cur+speed)+')'; obj.style.opacity=(cur+speed)/100; } else{ obj.style[attr]=cur+speed+'px' }; } if(flag){ clearInterval(obj.timer) if(fn){ fn() } } }, 30); } </script> <div id="move"> <a href="#"><i><img src="images/tao.jpeg" /></i><p>淘宝</p></a> <a href="#"><i><img src="images/tian.png" /></i><p>天猫</p></a> <a href="#"><i><img src="images/tao.jpeg" /></i><p>淘宝</p></a> <a href="#"><i><img src="images/tian.png" /></i><p>天猫</p></a> <a href="#"><i><img src="images/tao.jpeg" /></i><p>淘宝</p></a> <a href="#"><i><img src="images/tian.png" /></i><p>天猫</p></a> </div> </body> </html>
http://pan.baidu.com/s/1i3fFyy5 自己下载去看