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 cookie操作代码
Mar 14 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
JavaScript函数详解
Feb 27 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
js不常见操作运算符总结
Nov 20 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
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
基于jquery的气泡提示效果
2010/05/31 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
js实现继承的5种方式
2015/12/01 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
Django框架多表查询实例分析
2018/07/04 Python
python得到windows自启动列表的方法
2018/10/14 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
给女朋友的道歉信
2014/01/10 职场文书
初中政治教学反思
2014/01/17 职场文书
服务员自我评价
2014/01/25 职场文书
环保建议书
2014/03/12 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
总账会计岗位职责
2015/04/02 职场文书
单位车辆管理制度
2015/08/05 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
golang生成vcf通讯录格式文件详情
2022/03/25 Golang