<!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>
