效果：

思路：

利用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. CentOS 6.9/Ubuntu 16.04源码安装RabbitMQ（二进制包tar.gz）

    说明:CentOS的安装方式同样适合在Ubuntu中,把源改成APT即可. 一.安装erlang: 下载erlang: 从Erlang的官网http://www.erlang.org/download ...

  2. 自定义Cell引发的悲剧。。。。

    这两天毕设,昨晚微调自定义的cell,之前用mrc的时候直接打开xib布局好自定义cell就行乐,不用去勾选Use Autolayout,可是昨晚开始,自定义cell中,label不能动态调高的问题, ...

  3. 某公司java面试经历

    为什么说某公司.由于确实面完了最后挂了回来也没记住公司叫啥名字.是老乡兼好友内推去的小公司,名字有点长,所以也没记住. 公司确实太小,所说是外包公司.然后面回来后跟ACM的前学长说了,他们仅仅说所以不 ...

  4. acle联机日志文件的维护

    1.刷新重做日志缓存的时机 a.commit b.缓存满了 c.checkpoint,checkpoint的触发有两种机制: 定时触发,由log_checkpoint_interval[1]参数决定间 ...

  5. PhantomJS + Selenium webdriver 总结-元素定位

    webdriver提供了丰富的API,有多种定位策略:id,name,css选择器,xpath等,其中css选择器定位元素效率相比xpath要高些,使用id,name属性定位元素是最可靠,效率最高的一 ...

  6. [Functional Programming ADT] Initialize Redux Application State Using The State ADT

    Not only will we need to give our initial state to a Redux store, we will also need to be able to re ...

  7. animateBackground-plugin

    (function ($) { if (!document.defaultView || !document.defaultView.getComputedStyle) { var oldCurCSS ...

  8. iOS 8 Share Extension Safari URL Example（在iOS中分享url的样例）

    ios8 的Extension给我们提供了非常多奇妙的功能.以后分享内容再也不用进入app了,让我们的手机更安全,以下我们以在safari 浏览器中分享一个web url 来讲述Share Exten ...

  9. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)如何修改标准驱动器编码器分辨率

    在某个轴的Enc上双击,可以修改Scaling Factor Numerator     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/acetao ...

  10. PowerDesigner一些常用功能介绍

    主键.自增长等等 修改之前: drop table if exists sys_user; /*==================================================== ...