                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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

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>

</body>

</html>

01:55

qq_语默_2

2015-12-03

源自：JS动画效果 2-1

关注问题我要回答

924

操作

收起

3 回答

Siming0
2016-03-04

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

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

收起回答

fulcrum_逸凡
2015-12-27

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

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

收起回答

一毛钱
2015-12-03

<!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 回复有任何疑惑可以回复我~

收起回答