为了账号安全,请及时绑定邮箱和手机立即绑定

求教,不知道问题在那,跟着老师步骤走的,效果却不一样,只是会晃动一下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>动画</title>
	<style type="text/css">
		*{
margin: 0;
padding: 0;
}
#move{
width: 300px;
margin: 10px auto;
border: 1px solid #ccc;
background-color: pink;
}
#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: 12px;
text-decoration: none;
line-height: 25px;
overflow: hidden;
}
#move a i{
position: absolute;
top: 20px;
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 type="text/javascript">
		window.onload=function(){
			var M=document.getElementById('move');
			var A=M.getElementsByTagName('a');
			for(var i=0;i<A.length;i++){
				A[i].onmouseover=function(){
					var T=this.getElementsByTagName('i')[0];
					star(T,{top:-25,opacity:0},function(){
						T.style.top=30+'px';
						star(T,{top:20,opacity:100});
					});
				}
			}
		}
		function getStyle(obj,attr){
			if(obj.currentStyle){
				return obj.currentStyle[attr];
			}
		else{
			return getComputedStyle(obj,false)[attr];
		}
	}	
	var alpha=30;
	function star(obj,json,fn){
	
		clearInterval(obj.timer);
		obj.timer=setInterval(function(){
			var flag=true;
			for(var attr in json)
		{		
			var s=0;
			if(attr=='opacity'){
				 s=Math.round(parseFloat(getStyle(obj,attr))*100);
			}else{
				 s=parseInt(getStyle(obj,attr))
			}
		
			var speed=(json[attr]-s)/8;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			if(s!=json[attr]){
				flag=false;
				}
				if(attr=='opacity'){
					obj.style.filter='alpha(opacity:'+(s+speed)+')';
					obj.style.opacity=(s+speed)/100;
				}else{
				obj.style[attr]=s+speed+'px';}
			if(flag){
			clearInterval(obj.timer);}
			if(fn){
				fn();
			}
		}
		},30)
	}
	</script>
</head>
<body>
<div id="move">
	<a href="#"><i><img src="images/lottery.png"></i><p>彩票</p></a>
	<a href="#"><i><img src="images/movie.png"></i><p>电影</p></a>
	<a href="#"><i><img src="images/travel.png"></i><p>旅行</p></a>
	<a href="#"><i><img src="images/game.png"></i><p>游戏</p></a>
	<a href="#"><i><img src="images/insurance.png"></i><p>保险</p></a>
	<a href="#"><i><img src="images/food.png"></i><p>外卖</p></a>
</div>
</body>
</html>


正在回答

3 回答

if(flag){

            clearInterval(obj.timer);

            if(fn){

                fn();

            }

}应该是这样。


0 回复 有任何疑惑可以回复我~

if(flag){

            clearInterval(obj.timer);}

            if(fn){

                fn();

            }

这里有问题。


0 回复 有任何疑惑可以回复我~

到了58行效果还跟老师的一样,加上59 60折两行就不一样了,也不向上消失,只是会晃动一下,求大神解答!!

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

求教,不知道问题在那,跟着老师步骤走的,效果却不一样,只是会晃动一下

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信