motion4

作者: Jadon7 | 来源:发表于2018-10-15 22:44 被阅读0次

<!DOCTYPE html>
<html>
<head>
    <title>motion4</title>
</head>
<script>
    window.onload=function(){
        var oDiv=document.getElementById('div1');
        oDiv.onclick=function(){
            motion4(300);
        }
    }

    function motion4(iTarget){
        var oDiv=document.getElementById('div1');
        var timer=null;
        clearInterval(timer);
        setInterval(function(){
            var spead=0;
            if (oDiv.offsetLeft<iTarget) {
                spead=7;
            } else {
                spead=-7
            }
            if (Math.abs(iTarget-oDiv.offsetLeft)<7) {
                clearInterval(timer);
                oDiv.style.left=iTarget+'px';
            } else {
                oDiv.style.left=oDiv.offsetLeft+spead+'px';
            }
        },17)
    }
</script>
<style>
    #div1{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
<body>
    <div id="div1"></div>
</body>
</html>