效果：

思路：

首先遍历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. System.Object 基类

    System.Object在.Net中是所有类型的基类,任何类型都直接或间接地继承自System.Object.没有指定基类的类型都默认继承于System.Object. 基类特性 正由于所有的类型都 ...

  2. 用 Jenkins + .netcore 2.0 构建

    上一篇是关于 .net framework 框架的, 今天是关于 .netcore 2.0 的 这里为大家分享 配置中踩到的坑 cd %WORKSPACE%\"需要还原的项目目录" ...

  3. palm os

    在3G展会上,Palm将告别Palm OS操作系统 2009年2月12日消息,据国外媒体报道,周三,Palm CEO埃德•科林根(Ed Colligan)在旧金山的一个投资者会议上表示,Palm将告别 ...

  4. appium+python自动化49-yaml管理定位元素

    前言 如何高效管理定位元素,这个是很有学问的问题,也是面试必问的[以下纯属个人观点,勿喷!]. 有的人用xml管理页面定位元素,这种逼格略高,但是小编认为学习成本大,贼麻烦. 有的人提到用excel管 ...

  5. Scut快速开发

    1     开发环境 Scut Lib版本:5.2.3.2 需要安装的软件 a)        IIS和消息队列(MSMQ) b)        数据库,Sql2005以上版本 c)        V ...

  6. Android进阶笔记：Messenger源码详解

    Messenger可以理解为一个是用于发送消息的一个类用法也很多,这里主要分析一下再跨进程的情况下Messenger的实现流程与源码分析.相信结合前面两篇关于aidl解析文章能够更好的对aidl有一个 ...

  7. Struts2的动态Action实现

    源自:Struts2的动态Action实现 在Struts2中动态方法调用有三种方式. 一.指定method属性在struts.xml中指定action的method属性. <package n ...

  8. Linux下解压tar.xz文件

    xz -d glib-2.14.tar.xz tar -xvf glib-2.14.tar 前面一个是将xz文件解压成tar文件,后面一个是将tar文件解压. xz使用格式:压缩: xz -z fil ...

  9. java 过滤器（理解二）

    request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf ...

  10. Android轻量级的开源缓存框架ASimpleCache

    点击查看原文 先上方法调用,写最经常使用的.其它不一一写 保存数据: ACache mACache=ACache.get(this); mACache.put("数据名称", js ...