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

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

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. RESTful API的理解

    技术交流的时候遇到了这样的一个问题,被问及开发中用到的是不是Restful API,我说的是,我们现在用到的不属于完全是Restful API.因为我了解到的Restful API,是 通过具体的UR ...

  2. 源码分析— java读写锁ReentrantReadWriteLock

    前言 今天看Jraft的时候发现了很多地方都用到了读写锁,所以心血来潮想要分析以下读写锁是怎么实现的. 先上一个doc里面的例子: class CachedData { Object data; vo ...

  3. 基于 HTML5 + WebGL 的宇宙(太阳系) 3D 可视化系统

    前言 近年来随着引力波的发现.黑洞照片的拍摄.火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如<三体>.<流浪地球>.<星际穿越>等的传播普及,宇宙空间 ...

  4. CNCF官方大使张磊：什么是云原生？

    作者|张磊 阿里云容器平台高级技术专家,CNCF 官方大使 编者说: 从 2015 年 Google 牵头成立 CNCF 以来,云原生技术开始进入公众的视线并取得快速的发展,到 2018 年包括 Go ...

  5. Java 理论与实践: 处理 InterruptedException【转】

    这样的情景您也许并不陌生:您在编写一个测试程序,程序需要暂停一段时间,于是调用Thread.sleep().但是编译器或 IDE 报错说没有处理检查到的InterruptedException.Int ...

  6. int main (int argc, const char * argv[0]) 中参数的含义；指针数组和数组指针

    恩,有的编译器初始化时候会产生这样的参数 argc是命令行总的参数个数,argv[]是argc个参数,其中第0个参数是程序的全名 1. 几种C++ 常见的参数种类 int main(void); in ...

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

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

  8. json注记

    Javascript支持的转换方式  eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号 注:ie8(兼容模式), ...

  9. 深入浅出-iOS程序性能优化

    iOS应用是非常注重用户体验的,不光是要求界面设计合理美观,也要求各种UI的反应灵敏,我相信大家对那种一拖就卡卡卡的 TableView 应用没什么好印象.还记得12306么,那个速度,相信大家都受不 ...

  10. git配置文件—— .editorconfig

    参考文档 editorconfig官方文档 github/editorconfig/wiki文档 一 概述 editorConfig不是什么软件,而是一个名称为.editorconfig的自定义文件. ...