                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動(dòng)畫效果

為什么不會停止？

#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動(dòng)畫效果 2-1

關(guān)注問題我要回答

1048

操作

收起

1 回答

qq_木生紋_0
2017-08-19

<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>無標(biāo)題文檔</title>
<style?type="text/css">
	*{
		margin:?0;
		padding:?0;
	}/*設(shè)置整個(gè)文檔的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");//應(yīng)該是給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>