为什么设置了clearInterval()没有效果了。-慕课网

为什么设置了clearInterval()没有效果了。

来源：2-1 JS速度动画

记得喝水

2015-12-06 12:27

为什么设置了clearInterval()没有效果了。

<!DOCTYPE html>
<html lang="en/zh">
<head>
    <meta charset="UTF-8">
    <title>JS动画</title>    
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }
        #share{
            width: 200px;
            height: 200px;            
            background: #2dcb7c;
            position: relative;            
            left:-200px;
        }
        #share span{
            width: 60px;
            height: 50px;
            line-height: 50px;
            background: #272822;
            position: absolute;/*发现了一个秘密，只要用了定位，就可以把inline元素转换层block元素*/
            right: -60px;
            top: 75px;
            text-align: center;
        }
    </style>    
</head>
<body>
    <div id="share">
        <span>分享</span>
    </div>


<!-- javascript代码 -->
    <script type="text/javascript">        
            window.onload =function(){    
                 var odiv=document.getElementById("share");            
                odiv.onmouseover=function(){
                    gos();
                }
            }
            /*动画函数*/
            var timer=null;
            function gos(){
                clearInterval(timer);
                var odiv=document.getElementById("share");                                        
                    timer=setInterval(function(){
                    if(odiv.offsetLeft ==-10){
                        clearInterval(timer);
                    }
                    odiv.style.left=odiv.offsetLeft+10+"px";
                },30)        
            }        
    </script>        
</body>
</html>

写回答关注

1回答

木子舟义

2015-12-06 13:26:18

已采纳

<!DOCTYPE html>
<html lang="en/zh">
<head>
<meta charset="UTF-8">
<title>JS动画</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
#share{
width: 200px;
height: 200px;
background: #2dcb7c;
position: relative;
left:-200px;
}
#share span{
width: 60px;
height: 50px;
line-height: 50px;
background: #272822;
position: absolute;/*发现了一个秘密，只要用了定位，就可以把inline元素转换层block元素*/
right: -60px;
top: 75px;
text-align: center;
}
</style>
</head>
<body>
<div id="share">
<span>分享</span>
</div>


<script type="text/javascript">
window.onload =function(){
var odiv=document.getElementById("share");
odiv.onmouseover=function(){
gos();
}
}
/*动画函数*/
var timer=null;
function gos(){
clearInterval(timer);
var odiv=document.getElementById("share");
timer=setInterval(function(){
if(odiv.offsetLeft >=-10){
clearInterval(timer);
}else{
odiv.style.left=odiv.offsetLeft+10+"px";}
},30)
}
</script>
</body>
</html>

改了一下

1 3

记得喝水

非常感谢！

2015-12-06 13:35:52

共 1 条回复 >

JS动画效果

通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装

113923 学习 · 1443 问题

查看课程

相似问题

为什么clearInterval停止不了？

回答 1

加了getstyle()没有效果了

回答 1

请问为什么没有效果了？？不知都哪里出错了。

回答 6

clearInterval 无效

回答 1

clearInterval无效？

回答 3

打开慕课网App查看更多内容