不用i標簽，直接用img標簽，問題出在哪
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS案例</title>
<style type="text/css">
#move{
width:300px;
height:300px;
margin: 10px auto;
padding: 5px;
border:1px solid #ccc;
background-color: #ddb;
}
#move a{
display:inline-block;
width: 58px;
height:35px;
border:1px solid #ddd;
border-radius: 5px;
background-color: #fff;
margin:10px 17px;
text-align: center;
position: relative;
padding-top: 45px;
text-decoration: none;
font-size:12px;
color:#9c9c9c;
line-height: 22px;
}
/*#move a i{
position: absolute;
left:9px;
top:3px;
}*/
#move a img{
position: absolute;
border:none;
width:35px;
height:35px;
left:11px;
top:5px;
margin-top: 0px;
fliter:alpha(opacity=100);
opacity:1;
}
#move a p{
margin:3px auto;
}
#move a:hover{color:#f00;}
</style>
<script src="js/move1.js"></script>
<script>
window.onload=function(){
var iMove=document.getElementById('move');
var aList=iMove.getElementsByTagName('a');
for(var i=0;i<aList.length;i++){
aList[i].onmouseover=function(){
var IM=this.getElementsByTagName('img')[0];
startMove(IM,{top:-35,opacity:0},function(){
//IM.style.top=10+'px';
startMove(IM,{top:5,opacity:100});
});
}
}
}
</script>
</head>
<body>
<div id="move">
<a href="#"><img src="images/telephone.png" /><p>通訊</p></a>
<a href="#"><img src="images/movie.png" /><p>電影</p></a>
<a href="#"><img src="images/game.png" /><p>游戲</p></a>
<a href="#"><img src="images/sell.png" /><p>出售</p></a>
<a href="#"><img src="images/money.png" /><p>理財</p></a>
<a href="#"><img src="images/travel.png" /><p>旅游</p></a>
</div>
</body>
</html>
2016-11-20
函數里面的屬性名加上引號試試
2016-10-31
可以通過i標簽來定位到png圖片進行遍歷