不用i标签，直接用img标签，问题出在哪
前端大神是我的梦
2016-10-31 13:01
<!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>
2回答
-
- qq___571
- 2016-11-20 11:55:01
函数里面的属性名加上引号试试
-
- qq_岁月熏染上了_04049752
- 2016-10-31 15:42:30
可以通过i标签来定位到png图片进行遍历
JS动画效果
113925 学习 · 1443 问题
相似问题