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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
React列表栏及购物车组件使用详解
Jun 28 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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
php给图片加文字水印
2015/07/31 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
收集的10个免费的jQuery相册
2011/02/26 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
EasyUI实现下拉框多选功能
2017/11/07 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
opencv3/python 鼠标响应操作详解
2019/12/11 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
出纳岗位职责范本
2013/12/01 职场文书
财务部出纳岗位职责
2013/12/22 职场文书
个人简历自我评价范文
2014/02/04 职场文书
教师对学生的寄语
2014/04/03 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python