<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#oMove{width:280px;height:140px;background-color:#eaeaea;}
#oMove a{display:block;width:68px;height:68px;margin:1px;background-color:#fff;float:left;text-align:center;position:relative;}
#oMove i{position:absolute;top:20px;margin-left:-10px;filter:alpha(opacity:100);opacity:1;}
#oMove p{color:#666;margin-top:48px;}
#oMove p:hover{color:#f40;}
</style>
</head>
<body>
<div id="oMove">
<a><i><img src="icon.png" alt="icon"></i><p>games</p></a>
<a><i><img src="icon.png" alt="icon"></i><p>games</p></a>
<a><i><img src="icon.png" alt="icon"></i><p>games</p></a>
<a><i><img src="icon.png" alt="icon"></i><p>games</p></a>
<a><i><img src="icon.png" alt="icon"></i><p>games</p></a>
<a><i><img src="icon.png" alt="icon"></i><p>games</p></a>
<a><i><img src="icon.png" alt="icon"></i><p>games</p></a>
<a><i><img src="icon.png" alt="icon"></i><p>games</p></a>
</div>
<script>
window.onload=function(){
var oMove=document.getElementById("oMove");
var alis=oMove.getElementsByTagName("a");
for(var i=0;i<alis.length;i++){
alis[i].onmouseover=function(){
var _this=this.getElementsByTagName("i")[0];
startMove(_this,{top:-25,opacity:0},function(){
_this.style.top=30+"px";
startMove(_this,{top:20,opacity:100});
});
}
}
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,json,fn){
var flag=true;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var attr in json){
var icur;
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-icur)/8;
speed= speed>0?Math.ceil(speed):Math.floor(speed);
if(json[attr]!=icur){
flag=false;
}
if(attr=='opacity'){
obj.style.filter='alpha(opacity='+icur+speed+')';
obj.style.opacity=(icur+speed)/100;
}else{
obj.style[attr]=icur+speed+'px';
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
}
},3)
}
</script>
</body>
</html>
