zoukankan      html  css  js  c++  java
  • JS实现多物体width缓冲运动实例

    多物体运动,运动参数不能公用。

    这篇文章主要介绍了JS实现多物体缓冲运动实例代码,有需要的朋友可以参考一下
    效果:

    思路:

    利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动。

    代码:

    代码如下:
    <head runat="server">
        <title></title>
        <style type="text/css">
            div
            {
                width: 100px;
                height: 50px;
                background: #0000FF;
                margin: 10px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function () {
                var oDiv = document.getElementsByTagName('div');
                for (var i = 0; i < oDiv.length; i++) {
                    oDiv[i].timer = null;           //给买个DIV做个标记,用以关闭相应DIV的定时器
                    oDiv[i].onmouseover = function () {
                        move(this, 400);        //给定时器输出参数
                    }
                    oDiv[i].onmouseout = function () {
                        move(this, 100);
                    }
                }
            };
            function move(div, end) {
                clearInterval(div.timer);
                div.timer = setInterval(function () {
                    var speed = (end - div.offsetWidth) / 5;        //(终点-要走的宽度)/缩放系数=DIV移动的速度
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);   //小数取整,也就是进位取整
                    if (div.offsetWidth == end) {       //当到达终点时关闭计时器
                        clearInterval(div.timer);
                    }
                    else {
                        div.style.width = div.offsetWidth + speed + 'px';   //移动DIV的宽度
                    }
                }, 30)
            }
        </script>
    </head>
    <body>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
    </body>


  • 相关阅读:
    170821-关于SpringMVC的知识点
    170820-关于JSP页面的知识点
    170819-关于JSTL的知识点
    170819-关于EL表达式的知识点
    170817关于文件下载的知识点
    170814关于Cookie的知识点
    170817关于文件上传的知识点
    170817关于JSON知识点
    170817关于AJAX的知识点
    爬虫框架Scrapy之详解
  • 原文地址:https://www.cnblogs.com/hl-520/p/4239876.html
Copyright © 2011-2022 走看看