为什么我的没有效果,不晓得哪里出问题了
<!DOCTYPE >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>完美动画效果</title>
<script type="text/javascript" src="js/move.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script>
window.onload=function(){
var move=document.getElementById("move");
var list=move.getElementsByTagName("a");
for(var i=0;i<list.length;i++){
list[i].onmouseover=function(){
var _this=this.getElementsByIdName("i")[0];
startMove(_this,{top:-8,opacity:0},function(){
_this.style.top=30+"px";
startMove(_this,{top:8,opacity:100})
});
}
}
}
</script>
</head>
<body>
<div class="move" id="move">
<a href="#"><i><img src="images/phone.png"/></i><p>充话费</p></a>
<a href="#"><i><img src="images/movie.png"/></i><p>电影</p></a>
<a href="#"><i><img src="images/music.png"/></i><p>音乐</p></a>
<a href="#"><i><img src="images/game.png"/></i><p>游戏</p></a>
<a href="#"><i><img src="images/lottery.png"/></i><p>彩票</p></a>
<a href="#"><i><img src="images/safe.png"/></i><p>保险</p></a>
<a href="#"><i><img src="images/managemoney.png"/></i><p>理财</p></a>
<a href="#"><i><img src="images/tickets.png"/></i><p>火车票</p></a>
<a href="#"><i><img src="images/tour.png"/></i><p>旅游</p></a>
</div>
</body>
</html>
////////////////////////////万能运动框架
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,attr,iTarget,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//1.取当前的值
var icur=0;
if(attr=="opacity"){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
icur=parseInt(getStyle(obj,attr));
}
//2.算速度
var speed=(iTarget-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//3.检测停止
if(icur==iTarget){
clearInterval(obj.timer);
if(fn){
fn();
}
}
else{
if(attr=="opacity"){
obj.style.filter="alpha:(opacity:"+icur+speed+")";
obj.style.opacity=(icur+speed)/100;
}
else{
obj.style[attr]=icur+speed+"px";
}
}
},30)
}