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)
    }

相关阅读:
多线程学习
Redis学习2
Redis学习1
封装
创建对象内存分析
稀疏数组
反转数组、冒泡排序
可变参数
.net core 3.x Web Api + Docker个人练手项目
.net 性能优化手段

原文地址：https://www.cnblogs.com/lexie/p/6667477.html