【JS速度動(dòng)畫】選中框的代碼的+10+那里,發(fā)現(xiàn)將10換成其他數(shù)字(比如7),為什么div的運(yùn)動(dòng)就會(huì)超出我設(shè)的限制條件的無(wú)限持續(xù)下去
<html>
<head>
<meta charset="utf-8">
<style>
?#div1 {
? ? ? ? ? ? width: 380px;
? ? ? ? ? ? height: 247px;
? ? ? ? ? ? left: -380px;
? ? ? ? ? ? top: 0px;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? background: green;
? ? ? ? ? ? -moz-border-radius: 10px;
? ? ? ? ? ? -webkit-border-radius: 10px;
? ? ? ? ? ? border-radius: 10px;
? ? ? ? ? ? -moz-box-shadow: 0 0 8px #000;
? ? ? ? ? ? -webkit-box-shadow: 0 0 8px #000;
? ? ? ? ? ? box-shadow: 0 0 8px #000;
? ? ? ? }
#span1 ? {
? ? ? ? ? ?width: 30px;
? ? ? ? ? ? height: 80px;
? ? ? ? ? ? left: 380px;
? ? ? ? ? ? top: 168px;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? background: #567;
? ? ? ? ? ?-moz-border-radius: 10px;
? ? ? ? ? ? -webkit-border-radius: 10px;
? ? ? ? ? ? border-radius: 3px;
? ? ? ? ? ? -moz-box-shadow: 0 0 8px #000;
? ? ? ? ? ? -webkit-box-shadow: 0 0 8px #000;
? ? ? ? ? ? box-shadow: 0 0 8px #000;
? ? ? ? }
#p1 ? ? ?{color: ? #fff;}
</style>
</head>
<body>
<div id="div1"><span id="span1"><p id="p1">分享到</p></span></div>
<script>
//加載即運(yùn)行的始祖根函數(shù)
window.onload=function()
{
var div1=document.getElementById("div1"),
? ? span1=document.getElementById("span1")
? ? timer=null
?
? ?div1.onmouseover=function()
? ?{
? ? startMove();
? ?}
? ?
function startMove()
{?
clearInterval(timer)
? ? ?
timer=setInterval(function()
{?
? ? ? ? ? div1=document.getElementById("div1")
? ? ? ? ? if(div1.offsetLeft==0)
?{clearInterval(timer);}
?else
?{div1.style.left=div1.offsetLeft+10+'px';}
?
},30)
}
}
</script>
</body>
</html>
2016-03-19
因?yàn)?是除不盡的??if(div1.offsetLeft==0) 條件不可能成立,所以不行,