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>

赞 (0)

相关推荐

  • 使用JavaScript实现弹出层效果的简单实例

    使用JavaScript实现弹出层效果的简单实例

    声明 阅读本文需要有一定的HTML.CSS和JavaScript基础 设计 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 <!DOCTYPE html> <html> <head> <title>Window对象</title> <meta charset="utf-8"> </head> <body> <a hr

  • JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

    本文实例讲述了JS+CSS实现鼠标经过弹出一个DIV框效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • js点击任意区域弹出层消失实现代码

    本文实例为大家分享了js点击任意区域弹出层消失的具体代码,供大家参考,具体内容如下 采用jquery element.parents();判断点击区域是否在弹出层上面或者在按钮上面,否则让弹出层消失. 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head

  • js实现缓冲运动效果的方法

    本文实例讲述了js实现缓冲运动效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现一开始速度很快,然后慢下来,直到停止的效果. 要点: var speed = (target-box.offsetLeft)/8; 目标点减去元素的当前位置的值除以8,因为offsetleft的值是一直在变大,所以速度的值也是一直的变小 speed = speed>0?Math.ceil(speed):Math.floor(speed); 正向速度的时候向上取整,反向速度的时候向下取整 代码: <!DO

  • js实现div弹出层的方法

    本文实例讲述了js实现div弹出层的方法.分享给大家供大家参考.具体分析如下: 话说现在各种插件出来了要实现弹出层真是太简单了,但个人有时觉得那些插件不实用经常会找一些纯js原生态的东西,下面来给各位分享一个原生太js div弹出层实例,有需要的朋友可一起看看. 这个不用多说了,直接贴代码吧.有码有注释: 复制代码 代码如下: /*  * 弹出DIV层 */ function showDiv() { var Idiv     = document.getElementById("Idiv&quo

  • js 点击页面其他地方关闭弹出层(示例代码)

    复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> <!-- *{font-size:12px;font-family:Verdana, Gen

  • JS实现侧边栏鼠标经过弹出框+缓冲效果

    可能这个标题起得不够恰当,简单来说就是:当鼠标移到最左侧时,移出一个框. 首先,我们用两个div来简单布局以下页面: <div id="box"> <div id="share">分享到</div> </div> 这个分享框的弹出原理是:把内层div定位到外层div最右侧紧贴,然后把外层div定位到屏幕左外测,left的值与宽度相等,刚好隐藏掉就可以.当鼠标经过时,再通过改变left的值使外层div显示出来. <

  • js实现随屏幕滚动的带缓冲效果的右下角广告代码

    js实现随屏幕滚动的带缓冲效果的右下角广告代码

    本文实例讲述了js实现随屏幕滚动的带缓冲效果的右下角广告代码.分享给大家供大家参考.具体如下: 一个随屏幕自动滚动的右下角广告代码,这里请注意几个参数: id 你要滚动的内容的id r 放在左边还是右边 默认是右边 t 你要放在页面的那个位置默认是贴着底边 0是贴着顶边 f 1表示固定 不写或者0表示滚动(ie6固定无效) 是不是很实用呢,这个版本经过作者二次修正,兼容性还不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-

  • 使用js实现关闭js弹出层的窗口

    <script type="text/javascript">function toggle() {  theObj = document.getElementById('Sunyanzi').style;  if (  theObj.display == "none" ) theObj.display = "block"; else theObj.display = "none";}</script>

  • JS下拉缓冲菜单示例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> body,html

随机推荐