js动画-缓冲动画

HTML部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312"/>
<title>js动画-缓冲动画</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
</head>
<body>
    <div id="box">
        <span>移动</span>
    </div>
</body>
</html>

CSS部分：

* {
            margin: 0;
            padding: 0;
            font-family:"微软雅黑"
        }
        #box{
            height:100px;
            width:100px;
            background-color:#0099CC;
            margin-top:200px;
            position:relative;
            /*速速、缓冲变化*/
            left:-100px;
        }
        span{
            display:block;
            color:blue;
            width:25px;
            height:100px;
            background-color:#FFFF99;
            position:absolute;
            left:100px;
        }

JS部分：

window.onload=function(){
    var div1=document.getElementById("box");
    div1.onmouseover=function(){
        startMove(0);
    }
    div1.onmouseout=function(){
        startMove(-100);
        
    }
}
    var timer=null;
    function startMove(itarget){
        clearInterval(timer);
        var div1=document.getElementById("box");
        timer=setInterval(function(){
            var speed=(itarget-div1.offsetLeft)/20;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(div1.offsetLeft==itarget){
                clearInterval(timer);    
            }else{
                div1.style.left=div1.offsetLeft+speed+"px";
            }
        },30)
    }
posted @ 2017-04-05 10:01  lexie  阅读(1076)  评论(0)  编辑  收藏  举报