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

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

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. 【原创】（十二）Linux内存管理之vmap与vmalloc

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...

  2. day 23 复习

    本来应该学习day23,由于上午未学习,下去困,导致今天未进行进度 那就做一下简单的复习吧! 1. while else结构,如果while 后的条件条件不再满足 引发循环再继续,则执行else中的内 ...

  3. 是谁，在敲打我窗-CSS雨滴动画效果

    1.扯闲篇 是谁在敲打我窗  是谁在撩动琴弦  那一段被遗忘的时光 渐渐地回升出我心坎  是谁在敲打我窗  是谁在撩动琴弦 记忆中那欢乐的情景  慢慢地浮现在我的脑海 那缓缓飘落的小雨  不停地打在我 ...

  4. Find命令、文件名后缀、Linux和Windows互传文件 使用介绍

    第2周第5次课(3月30日) 课程内容: 2.23/2.24/2.25 find命令2.26 文件名后缀 2.27 Linux和Windows互传文件 find命令 文件查找: 1.which(一般用 ...

  5. 转:ETL讲解（很详细！！！）

    ETL讲解(很详细!!!) ETL是将业务系统的数据经过抽取.清洗转换之后加载到数据仓库的过程,目的是将企业中的分散.零乱.标准不统一的数据整合到一起,为企业的决策提供分析依据. ETL是BI项目重要 ...

  6. git的基本使用-1

    1.git的安装 这里只介绍在 Linux 上安装. 如果你想在 Linux 上用二进制安装程序来安装 Git,可以使用发行版包含的基础软件包管理工具来安装. 如果以 Fedora 上为例,你可以使用 ...

  7. MySQL必知必会(使用函数处理数据)

    #文本处理函数 SELECT vend_name, Upper(vend_name) AS vend_name_upcase FROM vendors ORDER BY vend_name; SELE ...

  8. multipart/form-data 文件上传表单中 传递参数无法获取的原因!

    1.什么是multipart/form-data 首先我们需要明白在html中的enctype属性, enctype:规定了form表单在发送到服务器时候编码方式.他有如下的三个值. ①applica ...

  9. jquery.countdown 倒计时插件的学习

    1.第一种简单的使用 第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...

  10. UVA11324 The Lagest Lique(SCC缩点+DP)

    Given a directed graph G, con- sider the following transformation. First, create a new graph T(G) to ...