JS怎么一直在抖动-慕课网

JS怎么一直在抖动

来源：2-1 JS速度动画

吴思超0

2015-12-10 14:27

<!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怎么一直在抖动，完全抄老师写的可是还是一直在抖动。。。到底哪里写错的？

写回答关注

4回答

木子舟义: 2015-12-10 14:56:53

已采纳

<!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>

2 0

吴思超0

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

2015-12-10 15:10:27

共 2 条回复 >

小尼采

2016-03-28 20:58:50

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

0 0
一把烂牌

2016-01-29 01:55:18

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

0 0
echo_kinchao

2015-12-10 16:49:35

兼容性问题

1 1

奶弟是林俊标

非常好

2015-12-15 11:10:53

共 1 条回复 >

JS动画效果

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

113910 学习 · 1502 问题

查看课程

相似问题

JS动画，元素抖动问题

回答 1

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

回答 2

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

回答 2

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

回答 1

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

回答 2

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