多物体动画

最新推荐文章于 2020-06-24 10:19:02 发布

D000

最新推荐文章于 2020-06-24 10:19:02 发布

阅读量433

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u011171159/article/details/52231172

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8" />
<title>多物体动画</title>
<style>
*{margin:0; padding:0; list-style: none;}

#div{
    position: relative;
    left: -200px;
    top: 0;
    width: 200px;
    height: 200px;
    background: orange;
}
#div span{
    position: absolute;
    left: 200px;
    top: 30%;
    width: 20px;
    height: 50px;
    background: red;
}
ul li{
    width: 200px;
    height: 100px;
    margin-bottom: 20px;
    background: #ddd;
}
</style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
<script>
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        for(var i=0; i<aLi.length; i++){
            aLi[i].timer = null; //每个li都加个定时器
            aLi[i].onmouseover = function(){
                startMove(this,400);//this当前的，宽变400
            }
            aLi[i].onmouseout = function(){
                startMove(this,200);
            }
        }
        // var timer;
        function startMove(obj,tagW){  //当前对象，目标宽度

            clearInterval(obj.timer); //关闭定时器
            obj.timer = setInterval(function(){
                //定义速度
                var speed = (tagW - obj.offsetWidth)/8;  //目标宽度-当前宽度
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                // 缓冲运动速度判断，如果速度大于零向上取整，小于零向下取整
                if(tagW == obj.offsetWidth){
                    clearInterval(obj.timer);
                }else{
                    obj.style.width = obj.offsetWidth + speed +'px';
                }
            },30)

        }
    }
</script>
</body>
</html>