JS实现多物体缓冲运动实例代码


Posted in Javascript onNovember 29, 2013

效果:

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>
Javascript 相关文章推荐
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
深入理解js数组的sort排序
May 28 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
JS实现匀速运动的代码实例
Nov 29 #Javascript
JS实现侧悬浮浮动实例代码
Nov 29 #Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 #Javascript
JS实现日期加减的方法
Nov 29 #Javascript
js弹出层永远居中实现思路及代码
Nov 29 #Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 #Javascript
JS取文本框中最小值的简单实例
Nov 29 #Javascript
You might like
Yii中render和renderPartial的区别
2014/09/03 PHP
yii的CURD操作实例详解
2014/12/04 PHP
php中session定期自动清理的方法
2015/11/12 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python self,cls,decorator的理解
2009/07/13 Python
Python列表推导式的使用方法
2013/11/21 Python
Python如何获取系统iops示例代码
2016/09/06 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
详解Python设计模式之策略模式
2020/06/15 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
机关单位动员会主持词
2014/03/20 职场文书
目标责任书格式
2014/07/28 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
2014年基建工作总结
2014/12/12 职场文书
白鹤梁导游词
2015/02/06 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书