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

为什么不会停止？

#div1{ width:200px; height:200px; background-color:red; position: relative; left:-200px; top:0px;}

#div1 span{ display:block; width:20px; height:50px; background-color:blue; position:absolute; left:200px; top:75px;}

</style>

window.onload=function(){

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

oDiv.onmouseover=function(){

starMove();

}

var timer=null;

function starMove()

{

clearInterval(timer);

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

timer = setInterval(function()

{

if(oDiv.offsetLeft == 0)

{

window.clearInterval(timer);

}

else

{

oDiv.style.left = oDiv.offsetLeft+1+"px";

}

},30)

}

qq_游戏人间_03362517

2017-08-18

源自：JS动画效果 2-1

关注问题我要回答

1000

操作

收起

1 回答

qq_木生纹_0
2017-08-19

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}/*设置整个文档的margin和padding*/
#div1{ width:200px; height:200px; background-color:red; position: relative; left:-200px; top:0px;}
#div1 span{  display:block; width:20px; height:50px; background-color:blue; position:absolute; left:200px; top:75px;}
</style>
<script>
window.onload=function(){
var share=document.getElementById("share");//应该是给share按钮添加事件
share.onmouseover=function(){
starMove();
}
}
var timer=null;
function starMove()
{
clearInterval(timer);
var oDiv=document.getElementById('div1');
timer = setInterval(function()
{
if(oDiv.offsetLeft == 0)
 {
 window.clearInterval(timer);
 }
else
 {	 
 oDiv.style.left = oDiv.offsetLeft+1+"px";
 }  
},30)
}
</script>
</head>

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