问答详情
源自：2-1 JS速度动画

一模一样的代码，怎么停不下来啊？？？？？？？？？？？？？？

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


提问者：qq_语默_2 2015-12-03 16:24

个回答

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

    clearInterval（timer），不能读取timer的参数，timer没有指向你设的计时器


    0
  • fulcrum_逸凡
    2015-12-27 01:33:12

    你可以试一下在style那里设置的最前的位置加上*{border:0px;padding:0px;margin:0px;}我之前也只这样子。我用的是chrome浏览器。

    0
  • 一毛钱
    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 只能是大于

    0