为什么不会停止？
来源：2-1 JS速度动画
qq_游戏人间_03362517
2017-08-18 21:15
<style type="text/css">
#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 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)
}
写回答
关注
1回答
-
- qq_木生纹_0
- 2017-08-19 02:21:39
<!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>
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113910 学习 · 1502 问题
相似问题