鼠标移上去，图标就消失了，这是怎么回事？
WendyMarvell
2015-08-04 21:21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>完美动画效果</title>
<style>
*{
margin:0;
padding:0;
}
#move {
width:300px;
height:200px;
background: #ededed;
margin: 10px auto;
border: 1px solid #ccc;
}
#move a{
display:inline-block;
width:58px;
height:25px;
border:1px solid #ddd;
border-radius:3px;
background-color:#fff;
text-align:center;
margin:10px 17px;
position:relative;
padding-top:40px;
color:#9c9c9c;
font-size:13px;
text-decoration:none;
line-height:25px;
overflow:hidden;
}
#move a i{
position:absolute;
top:10px;
left:0;
display:inline-block;
width:100%;
text-align:center;
filter:alpha(opacity=100);
opacity:1;
}
#move a:hover{
color:#f00;
}
#move img{
border:none;
}
</style>
<script src="../js/move.js"></script>
<script>
window.onload = function(){
var oMove = document.getElementById('move');
var aList = oMove.getElementsByTagName('a');
for(var i =0;i<aList.length;i++){
aList[i].onmouseover = function(){
var _this = this.getElementsByTagName('i')[0];
startMove(_this,{top:-15,opacity:0},function(){
_this.style.top = 20+'px';
startMove(_this,{top:10,opacity:100});
});
}
}
}
</script>
</head>
<body>
<div id='move'>
<a href='#'><i><img src="../images/Icon/icon1.jpg" /></i><p>游戏</p></a>
<a href='#'><i><img src="../images/Icon/icon2.jpg" /></i><p>旅行</p></a>
<a href='#'><i><img src="../images/Icon/icon3.jpg" /></i><p>保险</p></a>
<a href='#'><i><img src="../images/Icon/icon4.jpg" /></i><p>彩票</p></a>
<a href='#'><i><img src="../images/Icon/icon5.jpg" /></i><p>电影</p></a>
<a href='#'><i><img src="../images/Icon/icon6.jpg" /></i><p>点外卖</p></a>
</div>
</body>
</html>
1回答
-
- 醒悟wjn
- 2015-08-23 15:33:25
http://pan.baidu.com/s/1i3fFyy5 自己下载去看
JS动画效果
113925 学习 · 1443 问题
相似问题