效果：

思路：

首先遍历div挨个执行onmouseover事件，再设置获取非行间样式。然后编写setInterval计时器框架，框架内容是：将三个参数 div、div属性、div的目标点，分别获得，然后设置计时器，设置div的移动速度，然后进位转换，再判断什么时候停止，再进行移动。

代码：

 <head runat="server">

     <title></title>

     <style type="text/css">

         div

         {

             width: 200px;

             height: 200px;

             background: #FF0000;

             margin: 10px;

             border: 5px solid black;

             float:left;

         }

     </style>

     <script type="text/javascript">

         window.onload = function () {

             var oDivAll = document.getElementsByTagName('div');

             for (var i = 0; i < oDivAll.length; i++) {      //遍历div触发事件

                 oDivAll[i].timer = null;

                 oDivAll[i].onmouseover = function () {

                     move(this, 'font-size', 50);      //添加【任意属性】进行改变

                 }

                 oDivAll[i].onmouseout = function () {

                     move(this, 'font-size', 20);

                 }

             }

         };

         function getStyle(obj, name) {       //获取非行间样式

             if (obj.currentStyle) {     //判断兼容性

                 return obj.currentStyle[name];  //兼容IE

             }

             else {

                 return getComputedStyle(obj, false)[name];  //兼容Chrome   FF

             }

         }

         function move(obj, attr, end) {     //框架部分

             clearInterval(obj.timer);       //清除之前计时器

             obj.timer = setInterval(function () {       //开始相应物体的计时器

                 var objStyle = parseInt(getStyle(obj, attr));       //该物体的属性参数

                 var speed = (end - objStyle) / 5;       //（终点-每次移动的距离）/缩放系数=要走的速度

                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);   //小数取整，进位取整

                 if (objStyle == end) {          //如果距离到达终点那么就关闭计时器

                     clearInterval(obj.timer);

                 }

                 else {

                     obj.style[attr] = objStyle + speed + 'px';      //根据属性进行运动

                 }

             }, 30)

         }

     </script>

 </head>

 <body>

     <div id="div1">

     </div>

     <div id="div2">

     </div>

     <div>青苹果</div>

 </body>

点滴积累【JS】---JS小功能（JS实现动态添加运动属性)的更多相关文章

  1. JS类小功能

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

  2. 微信小程序之一：动态添加view（view包含picker,input）

    <view wx:for="{{array}}" wx:key="this" class="borderContainer"> ...

  3. 小生功能贴<一> --- 动态添加应用 具有长按删除功能

    ---恢复内容开始--- 动态添加应用 具有长按删除功能 功能如下图:                (图片显示功能不是你要的,那就默默关闭页面吧) 设计思路: 页面一:用girdview网格显示图标 ...

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

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

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

  6. js/jq 小功能函数

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

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

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

  8. JS自定义功能函数实现动态添加网址参数修改网址参数值

    无论是前端开发还是后台设计,很多时候开发人员都需要获取当前或目标网址的相关信息.这个已有现成的内置对象属性可以直接调用了(下面是获取当前页面的参考代码) 复制代码 代码如下: <script t ...

  9. vue.js如何实现点击按钮动态添加li

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. MYSQL数据库迁移总结

    Auth: JinDate: 2014-04-03 前端操作,后续测试对外开放不在本文 准备阶段操作阶段后续阶段 需求:phpcms和anquanzuo在一个mysql实例中anquanzuo有一张视 ...

  2. Phpstorm-php在线手册配置

    php在线手册配置 第一个是浏览器软件位置 第二个是php网站写法 第三个是工作路径 C:\Users\hasee\AppData\Local\Google\Chrome\Application\ch ...

  3. HDU 4658 Integer Partition （2013多校6 1004题）

    Integer Partition Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  4. 【系统自启动】使用windows自带工具管理开机启动项

    1.windows+R,键入:msconfig 2.进入启动选项卡 3.将不用自启动的选项 取消勾选即可 点击应用,重启电脑即可

  5. Android 自己收集的开源项目集合（持续更新 2018.2.5）

    2017.12.21 1.仿QQ说说发图片选择框架 https://github.com/yaozs/ImageShowPicker 2.炫酷开屏动画框架 https://github.com/Jos ...

  6. iOS:在使用Cocoapods安装shareSDK时出现的link路径错误

    CocoaPods 错误 target overrides the `OTHER_LDFLAGS`... Xcode 升级到 6.0 后,更新 CocoaPods,出现了如下的警告 [!] The ` ...

  7. JavaScript Dictionary

    Excellent.  The 4guysfromrolla example is very helpful, thanks.  I've pasted a complete javascript.j ...

  8. python 如何调用子文件下的模块

    在python开发中,经常会出现调用子文件夹下的py模块 如上图,如果在test.py文件中,要调用meeting文件夹下面的huodongshu.py 模块, 直接在test.py 中 import ...

  9. 转： 关于android 机型适配的问题

    转: http://www.csdn.net/article/2015-09-08/2825645

  10. r与java整合（转）

    http://jliblog.com/archives/10 R是统计计算的强大工具,而JAVA是做应用系统的主流语言,两者天然具有整合的需要.关于整合,一方面,R中可以创建JAVA对象调用JAVA方 ...