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

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

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. JVM学习笔记（1）--运行时数据区域

    运行时数据区域 相对于c,c++.程序设计时,java并不需要手动释放或者创建内存用于存放程序,这的确使得java开发变得容易和轻松,一旦有一天出现了内存泄漏或者内存溢出的问题,如果不了解JVM虚拟机 ...

  2. day 26 面向对象知识网

    1. 成员 - 变量 - 静态字段,类变量 - 方法 - 类方法 - 静态方法 - 实例方法 - 属性2. 对象的嵌套3. 特殊方法 __init__ new call getitem... add ...

  3. Wordpress未授权查看私密内容漏洞 分析（CVE-2019-17671）

    目录 0x00 前言 0x01 分析 0x02 思考 0x03 总结 0x04 参考 0x00 前言 没有 0x01 分析 这个漏洞被描述为"匿名用户可访问私密page",由此推断 ...

  4. 【Android - 自定义View】之View的measure过程解析

    measure(测量)过程是View的工作流程中最开始.最核心的过程,在这个过程中负责确定View的测量宽/高. 对于View和ViewGroup,measure过程有不同的执行方法:如果目标是一个原 ...

  5. 原生js删除增加修改class属性

    其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断. HTML DOM classList 属性 classList属性的方法有: add ...

  6. 文件和目录权限chmod、更改所有者和所属组chown、umask、隐藏权限lsattr/chattr 使用介绍

    第2周第3次课(3月28日) 课程内容:2.14 文件和目录权限chmod2.15 更改所有者和所属组chown2.16 umask2.17 隐藏权限lsattr/chattr 2.14 文件和目录权 ...

  7. Nginx动静分离（Nginx+Tomcat）

    第一步:nginx构建 第二步:Tomcat构建 1.Tomcat基础点 (1)Tomcat 是基于java开发的web容器,用来发布java代码和jsp网页. (2)开发人员开发java web网站 ...

  8. Flink应用程序结构开发介绍

    Flink程序遵循一定的编程模式.DataStream API 和 DataSet API 基本具有相同的程序结构.以下为一个流式程序的示例代码来对文本文件进行词频统计. package com.re ...

  9. spring-MVC_笔记

    需求:客户端发起请求,服务器端接收请求,执行逻辑并进行视图跳转. ①导入SpringMVC相关坐标②配置SpringMVC核心控制器DispathcerServlet ③创建Controller类和视 ...

  10. C# 设置、删除、读取Word文档背景——基于Spire.Cloud.Word

    Spire.Cloud.Word.Sdk提供了接口SetBackgroudColor().SetBackgroudImage().DeleteBackground().GetBackgroudColo ...