那個(gè)淘寶小圖標(biāo)動(dòng)畫效果怎么實(shí)現(xiàn)不了
按照教學(xué)視頻寫的，怎么效果就不一樣呢，放入鼠標(biāo)后，圖標(biāo)直接不見了
<!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>話費(fèi)</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>
2017-02-27
你有一個(gè)css樣式寫成：#width a i，剩下的效果自己參悟