一模一样的代码,怎么停不下来啊??????????????

来源:2-1 JS速度动画

qq_语默_2

2015-12-03 16:24

<!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>

div{width:200px;

    height:200px;

    background:red;

position:relative;

left:-200px;

top:0;

}

#div1 span{

width:20px;

height:50px;

background:blue;

position:absolute;

left:200px;

top:75px;

}

</style>

<script>

   window.onload=function(){

 var oDiv=document.getElementById("div1");

oDiv.onmouseover=function(){

                         startMove();

                          }

var timer=null;                         }   

function startMove(){

var oDiv=document.getElementById("div1");

if(oDiv.offsetLeft==500){cleaInterval(timer)}

else{

setInterval(function(){oDiv.style.left= oDiv.offsetLeft+1+"px";},300)


}

   


}

</script>


</head>


<body>

<div id="div1"><span id="share">分享</span></div>


</body>

</html>


写回答 关注

2回答

  • Siming0
    2016-03-04 16:14:32

    clearInterval(timer),不能读取timer的参数,timer没有指向你设的计时器


  • 一毛钱
    2015-12-03 16:38:29
    <!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>
    			div {
    				width: 200px;
    				height: 200px;
    				background: red;
    				position: relative;
    				left: -200px;
    				top: 0;
    			}
    			
    			#div1 span {
    				width: 20px;
    				height: 50px;
    				background: blue;
    				position: absolute;
    				left: 200px;
    				top: 75px;
    			}
    		</style>
    		<script>
    			window.onload = function() {
    				var oDiv = document.getElementById("div1");
    				oDiv.onmouseover = function() {
    					startMove();
    				}
    				var timer = null;
    			}
    
    			function startMove() {
    				var oDiv = document.getElementById("div1");
    
    					var timer1=setInterval(function() {
    						console.log(oDiv.offsetLeft);
    						oDiv.style.left = oDiv.offsetLeft + 1 + "px";
    						if (oDiv.offsetLeft >500) {
    							clearInterval(timer1);
    						}
    					}, 300)
    				
    			}
    		</script>
    
    	</head>
    
    	<body>
    		<div id="div1"><span id="share">分享</span></div>
    
    	</body>
    
    </html>

    你只是在开始的时候判断了一下oDiv.offsetLeft 是否等于500,这个肯定不能等于,要每移动一次判断一次,还有就是不能等于500 只能是大于

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113931 学习 · 1443 问题

查看课程

相似问题