为什么会出现这样的问题？-慕课网

为什么会出现这样的问题？

来源：2-2 JS透明度动画

飞天意大利面神兽

2016-05-30 14:27

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{margin: 0;padding: 0;}
			#div1{width:560px;height:660px;background-color:#0C4E7C;position:fixed;left:-560px;}
			span{width:20px;height:50px;background-color:#FFA500;position:absolute;left:560px;border: 5px dotted #8B0000;}
			#div2{width: 200px;height: 200px;background-color: #8B0000;opacity:0.3;margin-left:30px;}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var div=document.getElementById("div1");				//var stl=window.getComputedStyle(div,null);
				var div1=document.getElementById("div2");				//div.style.top=(document.documentElement.clientHeight/2)-parseInt(stl.height)/2+"px";
				//透明变化
				div1.onmouseover=function(){
					stars(100);
				}
				div1.onmouseout=function(){
					stars(30);
				}
				//伸缩运动
				div.onmouseover=function(){
					starMove(0);
				}
				div.onmouseout=function(){
					starMove(-560);
				}
			}
			//2-1&3-1
			var timer=null;
			function starMove(sp){
				clearInterval(timer);
				var div=document.getElementById("div1");
				timer=setInterval(function(){
					var speed=0;
					if(div.offsetLeft<sp){speed=6;}
					else{speed=-6;}
					if(div.offsetLeft==sp){
						clearInterval(timer);
					}
					else{
					if(div.offsetLeft>-560/2){speed=speed*3;}else{speed=speed;}
					div.style.left=div.offsetLeft+speed+"px";
					//解决抖动
					if(div.offsetLeft>0){clearInterval(timer);div.style.left="0px";}
					if(div.offsetLeft<-560){clearInterval(timer);div.style.left="-560px";}
					}
				},26)
			}
			//2-2
			var tiimer=null;
			var aph=30;
			function stars(isp){
				var div1=document.getElementById("div2");
				clearInterval(tiimer);
				tiimer=setInterval(function(){
					var speed=0;
					if(aph>isp){speed=-10;}else{speed=10;}
					if(aph==isp){clearInterval(tiimer);}
					else{
						aph+=speed;
						div1.style.opacity=aph/100;}
				},30)
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<span>分享</span>
		</div>
		<div id="div2">
			
		</div>
	</body>
</html>