onmouseout的定时器bug

滚筒洗衣机 发布于 2016/02/24 22:58
阅读 143
收藏 0
 
<!doctype html>
<html> <head> <meta charset="UTF-8"> <title>“分享到”案例</title> <style> #div1{width:100px;height:200px;background-color:red;position:absolute;top:100px;left:-100px;} input{width:30px;height:60px;background-color:#000;position:absolute;right:-30px;top:70px;border:none;color:#fff;word-wrap:break-word;} input:hover{cursor:pointer;} </style> <script> window.onload=function (){ var oDiv1=document.getElementById('div1'); var oInp=document.getElementsByTagName('input')[0]; oDiv1.onclick=function (){ clearInterval(oDiv1.timer); clearInterval(oDiv1.timer2); oDiv1.timer=setInterval(function (){ var speed=parseInt(getComputedStyle(oDiv1).left)+10; if(speed>0){speed=0;} oDiv1.style.left=speed+'px'; if(speed=0){clearInterval(oDiv1.timer);} },20) }; /*oDiv1.onmouseover=function (){ this.style.left=0+'px'; };*/ oDiv1.onmouseover=function (){ this.style.left=0+'px'; }; oInp.onmouseover=function (evt){ var evt=evt||event; evt.cancelBubble=true; }; oDiv1.onmouseout=function (){ clearInterval(oDiv1.timer); clearInterval(oDiv1.timer2); oDiv1.timer2=setInterval(function (){ var speed=parseInt(getComputedStyle(oDiv1).left)-10; if(speed<-100){speed=-100;} oDiv1.style.left=speed+'px'; if(speed=-100){clearInterval(oDiv1.timer2);}; },20) }; }; </script> </head> <body> <div id="div1"> <input type="button" value="分享到" name="share" /> </div> </body> </html>


第二个定时器oDiv1.timer2出现bug,怎么也返不回去-0-

加载中
返回顶部
顶部