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 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
vue前端工程的搭建
Mar 31 Vue.js
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中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
js 颜色选择插件
2017/01/23 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
python多线程抓取天涯帖子内容示例
2014/04/03 Python
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
详谈python read readline readlines的区别
2017/09/22 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
python实现雨滴下落到地面效果
2018/06/21 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
高考自主招生自荐信
2013/10/20 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
高中生家长寄语大全
2014/04/03 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
手残删除python之后的补救方法
2021/06/26 Python
python小型的音频操作库mp3Play
2022/04/24 Python