javascript动画效果之多物体缓冲运动

时间：2021-07-30 16:16:29

这个是通过一个for循环控制的三个li标签，被鼠标触发则会有一个宽度增加和减少的事件

html和css同样写在一起方便察看，这里就是简单的布局，重点在js

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         * {

             margin: 0;

             padding: 0;

             font-size: 12px;

         }

         div {

             margin: 10px;

             height: 360px;

             width: 200px;

         }

         ul {

             list-style: none;

         }

         ul li {

             width: 200px;

             height: 100px;

             background: blue;

             margin-bottom: 20px;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

     <div>

         <ul id="ali">

             <li></li>

             <li></li>

             <li></li>

         </ul>

     </div>

 </body>

 </html>

js部分就是通过for循环给每个li都绑定事件，同时为了避免冲突，每个li都需要一个单独的定时器

<script type="text/javascript">

        function $(id) {

            return typeof id === "string" ? document.getElementById(id) : id;

        }

        window.onload = function() {

            //自定义变量aLi为li标签的集合

            var aLi = $("ali").getElementsByTagName("li");

            //自定义变量

            var speed = 0;

            //通过for循环触发三个鼠标移动事件

            for (var i = 0; i < aLi.length; i++) {

                //为每个li都设置一个定时器，防止冲突

                aLi[i].timer = null;

                //鼠标移动进入，绑定事件

                aLi[i].onmouseenter = function() {

                        //调用自定义函数，并传参

                        start(this, 400);

                    }

                    //鼠标移动离开，绑定事件

                aLi[i].onmouseleave = function() {

                    //调用同一个自定义函数，并传参

                    start(this, 200);

                }

            }

            //自定义函数，自定义参数

            function start(one, two) {

                //清楚定时器，因为一个li只有一个定时器能执行

                clearInterval(one.timer);

                //one对应上面aLi[i]，所以one.timer就是aLi[i].timer

                one.timer = setInterval(function() {

                    //speed通过(two-one.offsetWidth)也就是(400-200)

                    //console.log(speed);

                    speed = (two - one.offsetWidth) / 10;

                    //判断是增加width还是减少

                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                    if (one.offsetWidth == two) {

                        //当为400或者200时候，清除定时器

                        clearInterval(one.timer);

                    } else {

                        //通过speed自增减

                        one.style.width = one.offsetWidth + speed + 'px';

                    }

                }, 30);

            }

        }

    </script>

相关文章