鼠标只在一个a标签内小范围移动，图标会不停的转，这个bug怎么破-慕课网

鼠标只在一个a标签内小范围移动，图标会不停的转，这个bug怎么破

来源：7-1 JS动画案例

qq_像苏_03760108

2016-09-13 20:24

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			*{margin:0;
			  padding:0;}
			#move{margin:10px auto;
				  width:300px;
				  background:#f9f9f9;
				  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:12px;
					text-decoration:none;
					line-height:25px;
					overflow:hidden;}
			  		
			#move a i{display:inline-block;
					  position:absolute;
					  top:12px;
					  left:0;
					  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">
		function getStyle(obj,attr){
	if(obj.currentStyle){
		return obj.currentStyle[attr];
	}else{
		return getComputedStyle(obj,false)[attr];
	}
}

function startMove(obj,json,fn){
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		var flag=true;
		for(var attr in json){
			var icur=0;
			var speed=0;
			if(attr=='opacity'){
				icur=Math.round(parseFloat(getStyle(obj,attr))*100);
			}else{
				icur=parseInt(getStyle(obj,attr));
			}
			var speed=(json[attr]-icur)/2;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			if(json[attr]!=icur){
				flag=false;
			}
			if(attr=='opacity'){
				obj.style.filter='alpha(opacity:'+(icur+speed)+')';
				obj.style.opacity=(icur+speed)/100;
			}else{
				obj.style[attr]=icur+speed+'px';
			}
		}
		if(flag==true){
			clearInterval(obj.timer);
			if(fn){
				fn();
			}
		}
	},30)
}
		</script>
		<script type="text/javascript">
			window.onload=function(){
				var oMove=document.getElementById('move');
				var aList=oMove.getElementsByTagName('a');
				for(i=0;i<aList.length;i++){
					aList[i].onmouseover=function(){
						var oThis=this.getElementsByTagName('i')[0];
						startMove(oThis,{top:-25,opacity:0},function(){
							oThis.style.top=30+'px';
							startMove(oThis,{top:12,opacity:100})
						})
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="move">
			<a href="#"><i><img src=img/hf.png /></i><p>话费</p></a>
			<a href="#"><i><img src=img/yx.png /></i><p>游戏</p></a>
			<a href="#"><i><img src=img/ly.png /></i><p>旅游</p></a>
			<a href="#"><i><img src=img/bx.png /></i><p>保险</p></a>
			<a href="#"><i><img src=img/cp.png /></i><p>彩票</p></a>
			<a href="#"><i><img src=img/dy.png /></i><p>电影</p></a>
		</div>
	</body>
</html>

写回答关注