                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

JS怎么一直在抖动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>练习JS</title>
</head>
<style type="text/css">
    body{
        margin:0;
        padding:0;
    }
    #div1{
        width:200px;
        height:140px;
        background-color: red;
        left: -202px;
        position: relative;
    }
    #div1 span{
        width:20px;
        height: 50px;
        background: #eee;
        position: absolute;
        left: 200px;
        top:75px;
    }
</style>
<body>
<div id="div1">
    <span id="share">分享</span>
</div>
<script>
    window.onload = function(){
        var wsc = document.getElementById('div1');
        wsc.onmouseover = function(){
            startMove(0);
        }
        wsc.onmouseout = function(){
        	starMove(-200);
        }
    }
    var timer = null;
    function startMove(iTarget){
    	clearInterval(timer);
        var wsc = document.getElementById('div1');
        timer = setInterval(function(){
        	var speed = 0;
        	if(wsc.offsetLeft > iTarget){
        		speed = -10;
        	}
        		else{
        		speed=10;
        		}
        	if(wsc.offsetLeft == iTarget){
        		clearInterval(timer);
        	}
        else{
            wsc.style.left = wsc.offsetLeft + speed +'px';
        }
        },30)
    }
</script>
</body>
</html>

JS怎么一直在抖动，完全抄老师写的可是还是一直在抖动。。。到底哪里写错的？

吴思超0

2015-12-10

源自：JS动画效果 2-1

关注问题我要回答

2222

操作

收起

4 回答

木子舟义
2015-12-10

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>练习JS</title>
</head>
<style type="text/css">
    body{
        margin:0;
        padding:0;
    }
    #div1{
        width:200px;
        height:140px;
        background-color: red;
        left: -200px;
        position: relative;
    }
    #div1 span{
        width:20px;
        height: 50px;
        background: #eee;
        position: absolute;
        left: 200px;
        top:75px;
    }
</style>
<body>
<div id="div1">
    <span id="share">分享</span>
</div>
<script>
    window.onload = function(){
        var wsc = document.getElementById('div1');
        wsc.onmouseover = function(){
            startMove(0);
        }
        wsc.onmouseout = function(){
            startMove(-200);
        }
    }
    var timer = null;
    function startMove(iTarget){
        clearInterval(timer);
        var wsc = document.getElementById('div1');
        timer = setInterval(function(){
            var speed = 0;
            console.log(wsc.offsetLeft);
            console.log(iTarget);
            if(wsc.offsetLeft > iTarget){
                speed = -10;
            }else{
                console.log('出');
                speed=10;
                }

            if(wsc.offsetLeft == iTarget){
                clearInterval(timer);
            } else{
            wsc.style.left = wsc.offsetLeft + speed +'px';
        }
        },30)
    }
</script>
</body>
</html>

0 回复有任何疑惑可以回复我~

#1

吴思超0 提问者

非常感谢！

2015-12-10 回复有任何疑惑可以回复我~

#2

吴思超0 提问者

你好问下我哪里写的不对？

2015-12-10 回复有任何疑惑可以回复我~

小尼采
2016-03-28

应该是移动到span上div动吧，你这个写的是移动到div上div动，而且div都已经-200，你怎么onmouseover的

0 回复有任何疑惑可以回复我~

一把烂牌
2016-01-29

你的div的css left: -202px; 改成-200 试试我试了下可以你再试试

0 回复有任何疑惑可以回复我~

echo_kinchao
2015-12-10

兼容性问题

1 回复有任何疑惑可以回复我~

#1

奶弟是林俊标

非常好

2015-12-15 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

参与学习 113925 人
解答问题 1443 个

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

本课相似问答

1 回答JS动画，元素抖动问题

2 回答为什么去掉var timer=null 动画就一直抖动

2 回答js动画改动怎么不出效果呢？

2 回答定时器前面一旦加了var 为什么就会抖动

1 回答关于抖动问题 BUG 当速度为30时到达0时会来回抖动

搜索更多本课相关问答

JS怎么一直在抖动

我要回答关注问题

意见反馈帮助中心 APP下载