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

回掉函数fn，在所有元素到达目的位置后，判断是否传入一个函数，有就调用 if(fn){fn()};

这样一次点击，产生多个动画

<!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.currentStyle[attr] || 0;

    }

    //element---元素

    //json---对象---多个属性及多个目标值

    //fn---函数

    function animate(element, json, fn) {

      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);

          if (fn) {

            fn();

          }

        }

        //测试代码

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

      }, 20)

    }

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

      var json1 = { "width": 400, "height": 200, "left": 500, "top": 80 };

      animate(my$("dv"), json1, function () {

        var json2 = { "width": 200, "height": 100, "left": 200, "top": 120 };

        animate(my$("dv"), json2, function () {

          var json3 = { "width": 400, "height": 300, "left": 300, "top": 80 };

          animate(my$("dv"), json3);

        });

      });

    };

  </script>

</body>

</html>

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

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

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

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

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

  3. js off 缓动动画

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

  4. JS实现缓动动画效果

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

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

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

  6. animation js控制 缓动效果

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>缓动 ...

  7. JQUERY操作html--获取和设置内容、属性、回调函数

    一:jQuery - 获取内容和属性 1.获得内容 - text().html() 以及 val() text() - 返回所选元素的文本内容 html() - 返回所选元素的内容(包括 HTML 标 ...

  8. ZeroMQ接口函数之 ：zmq_socket_monitor - 注册一个监控回调函数

    ZeroMQ 官方地址 :http://api.zeromq.org/4-2:zmq-socket-monitor zmq_socket_monitor(3) ØMQ Manual - ØMQ/4.1 ...

  9. register_shutdown_function函数详解--脚本退出时执行回调函数

    register_shutdown_function — Register a function for execution on shutdown. ps:Registers a callback  ...

随机推荐

  1. linux awk进阶篇

    上一篇主要是awk的进本应用.本节是awk的进阶篇 ACTION:除去常用的print和printf还有以下几个 expression:表达式 如$1>3 control statements: ...

  2. 影响ES相关度算分的因素

    相关性算分 指文档与查询语句间的相关度,通过倒排索引可以获取与查询语句相匹配的文档列表   如何将最符合用户查询需求的文档放到前列呢? 本质问题是一个排序的问题,排序的依据是相关性算分,确定倒排索引哪 ...

  3. mysql 插入string类型变量时候，需要注意的问题，妈的，害我想了好几个小时！！

    很多人在用php+MySQL做网站往数据库插入数据时发现如下错误: 注册失败!Unknown column '1a' in 'field list' 结果发现用数字提交是没有问题的,其他如char型就 ...

  4. c# 窗体开发3 文件处理技术

    以字节形式向磁盘写入数据通常称为字节流(比特流) 常常使用System.Io 常用的类 类 说明 File 提供用于创建.复制.删除.移动和打开文件的静态方法,并协助创建 FileStream 对象. ...

  5. jQuery实现倒计时重新发送短信验证码功能示例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. PyCharm 2019.3激活破解教程（永久）

    2019.12.02 jetbrains公司发布了Python的最强编辑器PyCharm 2019.3版本.本次大版本主要对Jupyter notebooks .MongoDB.Python3.8功能 ...

  7. Flask开发天气查询软件，带你掌握pipenv的使用与手机Termux下的部署

    关于pipenv 昨天介绍了pipenv这个相比于virtualenv更高端大气上档次的虚拟环境管理软件,但看了下流量貌似不是很受欢迎,也许是我介绍的不够好吧.那么今天就拿它做一个例子,开发一款天气预 ...

  8. DevOps on DevCloud|如何采用流水线践行CI/CD理念【华为云技术分享】

    [摘要] 持续集成/持续交付(CI/CD,Continuous Integration/Continuous Deployment)在DevOps CMALS理念中具有支柱性地位,因而CI/CD流水线 ...

  9. 华为云备案服务全面升级，EI助力带来极速体验

    华为云备案"电子化核验"正式发布,备案更轻松.更快捷.自2019年9月12日起,华为云用户申请办理ICP备案可以通过华为云APP进行"ICP备案主体真实身份信息采集&qu ...

  10. 使用Python为中秋节绘制一块美味的月饼

    每逢佳节- 对于在外的游子,每逢佳节倍思亲.而对于996ICU的苦逼程序猿们,最期待的莫过于各种节假日能把自己丢在床上好好休息一下了.这几天各公司都陆续开始发中秋礼品了.朋友圈各种秀高颜值的月饼,所以 ...