封装缓动动画函数---增加多个任意多个属性

在原来缓动动画函数，增加任意一个属性的基础上，做了如下改变

1. 原来function animate(element, attr, target)，三个变量，改为用json对象来装一对：属性:目标位置的值，变为function animate(element, json)

2. 之前的变速动画函数，都任意一个属性，改变其当前属性的位置，到达目标属性。现在有多个任意属性，用json对象装，所以要遍历json对象里面每一个值 for(var key in json){}, key就是这里的attr, 所以遍历的for(var attr in json)

3. 当前属性对应的目标值，var target就是json里面值的目标，var target=json[attr];

4. 添加了flag的判断，是为了，保证在json中所有的值都到达目的位置后，再清除定时器

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>title</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    div {

      margin-top: 30px;

      width: 200px;

      height: 100px;

      background-color: green;

      position: absolute;

      left: 0;

      top: 0;

    }

  </style>

</head>

<body>

  <input type="button" value="移动到400px" id="btn1" />

  <div id="dv">

  </div>

  <script src="common.js"></script>

  <script>

    //点击按钮，改变宽度到达一个目标值

    //点击按钮，改变宽度到达一个目标值，高度到达一个目标值

    //获取任意一个元素的任意一个属性的当前的值

    function getStyle(element, attr) {

      return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentSytle[attr] || 0;

    }

    function animate(element, json) {

      clearInterval(element.timeId);

      element.timeId = setInterval(function () {

        var flag = true; //默认，假设，全部到达目标

        for (var attr in json) {

          //获取元素这个属性的当前的值

          var current = parseInt(getStyle(element, attr));

          //当前的属性对应的目标值

          var target = json[attr];

          //移动的步数

          var step = (target - current) / 10;

          step = step > 0 ? Math.ceil(step) : Math.floor(step);

          current += step;//移动后的值

          element.style[attr] = current + "px";

          if (current != target) {

            flag = false;

          }

        }

        if (flag) {

          clearInterval(element.timeId);

        }

        //测试代码

        console.log("目标：" + target + ",当前" + current + ",每次移动的步数" + step);

      }, 20)

    }

    my$("btn1").onclick = function () {

      animate(my$("dv"), { "width": 400, "height": 200, "left": 500, "top": 80 })

    };

  </script>

</body>

</html>

效果如下：

JS---封装缓动（变速）动画函数---增加多个任意多个属性的更多相关文章

  1. JS---封装缓动（变速）动画函数---增加任意一个属性

    封装缓动(变速)动画---增加任意一个属性 1. 本来的变速动画函数,是获取特定的属性(之前案例是向右移动,所以获取的是left属性) 2. 现在改变为,获取任意一个属性,使其移动到指定的target ...

  2. JS---最终版本--封装缓动（变速）动画函数---增加任意多个属性&回调函数&层级&透明度

    封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度 相较之前的,增加了2个判断,第一个判断是不是透明度,第二个判断是不是zindex, 都不是,就只是普通属 ...

  3. JS---封装缓动（变速）动画函数---增加任意多个属性&增加回调函数

    封装缓动(变速)动画函数---增加任意多个属性&增加回调函数 回掉函数fn,在所有元素到达目的位置后,判断是否传入一个函数,有就调用 if(fn){fn()}; 这样一次点击,产生多个动画 & ...

  4. JS特效@缓动框架封装及应用

    | 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.变量CSS样式属性获取/赋值方法 给属性赋值:(既能获取又能赋值) 1)div.style.width 单个赋值:点语法,这个方法比较固定 ...

  5. js 变速动画函数

    //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ...

  6. 从零开始学 Web 之 BOM（三）offset，scroll，变速动画函数

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. js off 缓动动画

    动画也有很多种,一起来学习,缓动动画吧 缓动动画 1.缓动动画原理=盒子位置+(目标盒子位置-现在盒子位置)/10 2.步长越来越小 3.让步长越来越小的公式      步长=(目标位置-本身位置)/ ...

  8. JS实现缓动动画效果

    原理如下: 假设要从数值A变化到数值B,如果是线性运动,则每次移动距离是一样:如果是缓动,每次移动距离不一样.那如何才能不一样呢?很简单,按比例移动就可以. 例如:每次移动剩余距离的一半. 对吧,超容 ...

  9. 网站建设中前端常用的jQuery+easing缓动的动画

    网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...

随机推荐

  1. JAVA中的类不要使用$符的原因解析

    下面是在Java中标识符的定义 1.标识符由字母.数字.货币符号(￥.$等).连接符号(_等)组成.(这里的字母为Unicode字符集, 而不再局限于传统的26个英文字母.)2.标识符的首字符可以是字 ...

  2. Ajax与Http协议

    目录 Ajax与Http协议详解 Xhr对象 xhr对象发送请求整体感知 xhr对象的常用属性和方法 xhr对象发送post请求 xhr对象的兼容性问题 请求超时timeout与监听超时ontimeo ...

  3. Netty Pipeline与ChannelHandler那些事

    Pipeline和ChannelHandler是Netty处理流程的重要组成部分,ChannelHandler对应一个个业务处理器,Pipeline则是负责将各个ChannelHandler串起来的& ...

  4. Java并发编程：Callable、Future和FutureTask【转】

    原文链接:http://www.cnblogs.com/dolphin0520/p/3949310.html 创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Runnable接口. 这 ...

  5. 深入 .NET Core 基础 - 2：共享框架

    深入 .NET Core 基础 - 2:共享框架 原文地址:https://natemcmaster.com/blog/2018/08/29/netcore-primitives-2/ 共享框架从 . ...

  6. 浏览器/外网访问docker container中的hadoop

    假设你制作了个docker的 hadoop的镜像,镜像名叫 hd_image,如果想在外网的浏览器中访问hadoop的50070和8088端口,则在启动镜像hd_image时, 脚本如下: docke ...

  7. 2.4G芯片SI24R1可替代NRF24L01P

    随着美金和原厂对价格的调控,NRF24L01P的价格越来越高,对终端制造的客户造成了不少的压力成本,但很多人又不原意花费更多的人力物力去重新改版. 小编今天就着重给大家介绍一款芯片,可以在不改板的情况 ...

  8. react-native 跳转到ios/android 权限设置界面

    目录 ios android 1.在android/app/src/main/java/com/<projectname>文件夹下创建opensettings文件夹 2.在opensett ...

  9. [TimLinux] python-ldap 介绍

    1. 接口 ldap: LDAP库接口 ldap.asyncsearch: 大量搜索结果数据采用流处理 ldap.controls: LDAPv3上层访问扩展控制 ldap.dn: LDAP dist ...

  10. POJ 2559 Langest Rectangle in a Histogame

    A histogram is a polygon composed of a sequence of rectangles aligned at a common base line. The rec ...