效果：

思路：

利用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>

点滴积累【JS】---JS小功能（JS实现多物体缓冲运动)的更多相关文章

  1. JS类小功能

    工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...

  2. js实现小功能 动态赋值

  3. 常用小功能js函数-函数防抖

    函数防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时.这个我经常用到/** * 函数防抖 * fun 需要延时执行的函数 * delayTime 延时时间 * **/export ...

  4. js/jq 小功能函数

    1.点击复制内容到剪贴板 function copyToClip(str) { var save = function(e) { e.clipboardData.setData('text/plain ...

  5. js实现小时钟,js中Date对象的使用?

    介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,da ...

  6. 点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...

  7. 点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)

    效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...

  8. js小功能整理

    /** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [检测是否含有的字符串] * @return ...

  9. js小功能记录

    个人日常中遇到的js小功能记录,方便查看. /** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [ ...

随机推荐

  1. 一次完整的HTTP请求的大致过程（转）

    说明:这些理论基本都来自网上,所以不一定准确,但一定是比较好理解的,如果要刨根问底,最好的方式就是看书,且要看权威的书. 一次完整的HTTP请求所经历的7个步骤 HTTP通信机制是在一次完整的HTTP ...

  2. jQuery插件示例笔记

    插件的种类 封装对象方法的插件 将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作. //注意,为了更好的兼容性开始前有个分号 ;(function($){ //此处将$作为匿名函数的 ...

  3. GNU C内联汇编（AT&amp;T语法）

    转:http://www.linuxso.com/linuxbiancheng/40050.html 内联汇编提供了可以在C或C++代码中创建汇编语言代码,不必连接额外的库或程序.这种方法对最终程序在 ...

  4. ER TO SQL语句

    ER TO SQL语句的转换,在数据库设计生命周期的位置如下所示. 一.转换的类别 从ER图转化得到关系数据库中的SQL表,一般可分为3类: 1)转化得到的SQL表与原始实体包含相同信息内容.该类转化 ...

  5. VMware 8安装Mac OS X 10.7

    (Windows 7 X64环境下,VMware 8.0正式版)虚拟机首尝MAC OS X 10.7 Lion系统成功,特将此好消息分享.2年了,终于我也装上了Mac,我也成功的尝到了苹果味道,看着那 ...

  6. phaser框架制作游戏的例子，加上自己的注释

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. ajax常用请求方式

    1.JAVA @RequestMapping(value = "testAjax") @ResponseBody public Map<String, Object> ...

  8. [Todo] Git & 版本控制学习

    下面这篇写的非常好.git分支介绍,有图.好好看这一篇,就懂了: http://www.open-open.com/lib/view/open1328069889514.html 该系列还有不少文章, ...

  9. xampp Apache Access forbidden! Error 403解决方法

    今天下载了最新的xampp,配置了一个虚拟主机,一直在报错,Access forbidden! Error 403 这很明显是服务器不允许访问文件,但是我的虚拟主机配置如下: DocumentRoot ...

  10. ES集群Master节点配置问题

    ES集群的主节点发现机制采用单播形式,主要配置有三行,如下: discovery.zen.minimum_master_nodes: discovery.zen.ping.multicast.enab ...