<!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>icon运动</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#pic {
width: 300px;
margin: 20px auto;
border: 1px solid #ccc;
background-color: pink;
}
#pic a {
display: inline-block;
width: 50px;
height: 30px;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #fff;
text-align: center;
margin: 10px 17px;
position: relative;
padding: 40px 0px 10px 0px;
color: #9c9c9c;
font-size: 12px;
text-decoration: none;
line-height: 50px;
overflow: hidden;
}
#pic a i {
position: absolute;
top: 10px;
left: 0px;
display: inline-block;
width: 100%;
text-align: center;
fliter: alpha(opacity: 100);
opacity: 1;
}
#pic a:hover {
color: #F00;
}
#pic img {
border: none;
}
</style>
<script src="../动画效果/move.js"></script>
<script>
window.onload=function(){
var oMove=document.getElementById('pic');
var opic=oMove.getElementsByTagName('a');
for(var i=0;i<opic.length;i++){
opic[i].onmouseenter=function(){
var lisi=this.getElementsByTagName("i")[0];
starMove(lisi,{top:-40,opacity:0},function(){
lisi.style.top=20+'px';
starMove(lisi,{top:10,opacity:100});
});
}
}
}
</script>
</head>
<body>
<div id="pic">
<a href="#"><i><img src="21457905_140222653865_2.png" /></i><p>时间</p></a>
<a href="#"><i><img src="21457905_140222653865_2.png" /></i><p>不多</p></a>
<a href="#"><i><img src="21457905_140222653865_2.png" /></i><p>好好</p></a>
<a href="#"><i><img src="21457905_140222653865_2.png" /></i><p>加油</p></a>
</div>
</body>
每次都需要滑进划出两次然后才能执行完整动画，而且有的时候还不成功，又没有朋友能帮我看看这怎么回事啊？谢谢了
stone310
stone310
相关分类