完成（缓冲运动动画）-慕课网

完成（缓冲运动动画）

来源：3-1 JS缓冲动画

Daniel_

2014-11-29 15:53

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .frameworks{
            position:fixed;
            top:30%;
        }

        .frameworks span{
            width:20px;
            height:50px;
            position:absolute;
            border:1px #8e8e8e solid;
            color:#fff;
            background-color: #0088bb;
            left: 200px;
            top: 75px;

        }
        .content{
            width:200px;
            height:200px;
            background-color: #8e8e8e;
            position:relative;
            left:-200px;

        }
    </style>

</head>
<body>
<div>

    <div id="div1">
        <span>分享</span>
    </div>
</div>

</body>
<script type="text/javascript">
    window.onload = function(){
        var odiv = document.getElementById("div1");
        odiv.onmouseover=function(){

            startMove(0);
        };
        odiv.onmouseout=function(){

            startMove(-200);
        };
    };
    var timer=null;
    function startMove(iTarget){
        clearInterval(timer);
        var odiv = document.getElementById("div1");
        timer = setInterval(function () {//这段代码定义了速度变化的函数
         var speed=(iTarget-odiv.offsetLeft)/20;/*速度和距离成正比*/
            speed = speed>0?Math.ceil(speed)/*向上取整*/:Math.floor(speed);/*向下取整*/
            if(odiv.offsetLeft == iTarget){
                clearInterval(timer)
            }else {
                odiv.style.left = odiv.offsetLeft + speed + 'px'
            }
        }, 20)

    }

</script>
</html>