效果：

思路：

首先遍历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. Vue2.X的路由管理记录之 钩子函数（切割流水线）2

    $route可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化) 它. 导航和钩子函数: 导航:路由正在发生 ...

  2. TQuery

    TQuery uses syndb 查询 function Tfmain.query(const sql: string): RawUTF8;var q: TQuery;begin q := TQue ...

  3. socket连接和http连接的区别

    socket连接和http连接的区别 HTTP协议:简单对象访问协议,对应于应用层  ,HTTP协议是基于TCP连接的 tcp协议:    对应于传输层 ip协议:     对应于网络层 TCP/IP ...

  4. iOS:进度条控件的详细使用

    进度条控件:UIProcessView:UIView   功能:顾名思义,用来显示下载进度或者传输数据进度.   属性: @property(nonatomic) UIProgressViewStyl ...

  5. Java Web----EL(表达式语言)详解

     Java Web中的EL(表达式语言)详解 表达式语言(Expression Language)简称EL,它是JSP2.0中引入的一个新内容.通过EL可以简化在JSP开发中对对象的引用,从而规范页面 ...

  6. [TypeScript] Work with DOM Elements in TypeScript using Type Assertions

    The DOM can be a bit tricky when it comes to typing. You never really know exactly what you're going ...

  7. docker学习笔记-1

    docker学习笔记一:安装 mac安装docker docker官方文档上有这么一段话: Because the Docker daemon uses Linux-specific kernel f ...

  8. 无比强大！Python抓取cssmoban站点的模版并下载

    Python实现抓取http://www.cssmoban.com/cssthemes站点的模版并下载 实现代码 # -*- coding: utf-8 -*- import urlparse imp ...

  9. 苹果通知推送服务(APNS)关键特性摘要

    1. If APNs attempts to deliver a notification but the device is offline, the notification is stored ...

  10. 服务器如何开启php的fsockopen函数？ 使用发邮箱类

    参考:http://www.daixiaorui.com/read/16.html#viewpl 服务器如何开启php的fsockopen函数?如果你要使用一些邮件的类,那么很多要求支持php的fso ...