放源码（速度动画）-慕课网

放源码（速度动画）

来源：2-1 JS速度动画

Daniel_

2014-11-29 15:51

<!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 () {
                if(odiv.offsetLeft>iTarget){
                    speed = -10;
                }else{
                    speed = 10;
                }
                if(odiv.offsetLeft == iTarget){
                    clearInterval(timer)
                }else {
                    odiv.style.left = odiv.offsetLeft + speed + 'px'
                }
            }, 20)

    }

</script>
</html>