那个淘宝小图标动画效果怎么实现不了
按照教学视频写的，怎么效果就不一样呢，放入鼠标后，图标直接不见了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script src="perfectmove.js"></script>
<style type="text/css">
#wrap{
height: 280px;
width: 360px;
border: 1px solid #ccc;
margin: 0 auto ;
text-align: center;
}
#wrap a{
display: inline-block;
width: 90px;
height: 98px;
border: 1px solid #ddd;
border-radius: 3px;
text-align: center;
margin: 10px 6px;
position: relative;
font-size: 12px;
padding-top: 20px;
text-decoration: none;
line-height: 25px;
overflow: hidden;
}
#width a i{
position: absolute;
top:20px;
left: 0;
display: inline-block;
width: 100%;
opacity: 1;
filter:alpha(opacity:100);
}
#wrap a:hover{
color: #f60;
}
#wrap img{
border: none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var wrap = document.getElementById('wrap');
var as = wrap.getElementsByTagName('a');
for (var i = 0; i < as.length; i++) {
as[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});
});
}
}
}
</script>
</head>
<body>
<div id ="wrap">
<a href="#"><i><img src="images/001.jpg"></i><p>彩票</p></a>
<a href="#"><i><img src="images/002.jpg"></i><p>电影</p></a>
<a href="#"><i><img src="images/003.jpg"></i><p>书籍</p></a>
<a href="#"><i><img src="images/004.jpg"></i><p>话费</p></a>
<a href="#"><i><img src="images/005.jpg"></i><p>音乐</p></a>
<a href="#"><i><img src="images/006.jpg"></i><p>体育</p></a>
</div>
</body>
</html>
