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

相较之前的，增加了2个判断，第一个判断是不是透明度，第二个判断是不是zindex, 都不是，就只是普通属性和之前一样

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>title</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    div {

      width: 200px;

      height: 100px;

      background-color: green;

      position: absolute;

      left: 0;

      top: 0;

    }

    input {

      z-index: 10;

      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;

  }

  function animate(element, json, fn) {

    clearInterval(element.timeId);//清理定时器

    //定时器,返回的是定时器的id

    element.timeId = setInterval(function () {

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

      //遍历json对象中的每个属性还有属性对应的目标值

      for (var attr in json) {

        //判断这个属性attr中是不是opacity

        if (attr == "opacity") {

          //获取元素的当前的透明度,当前的透明度放大100倍

          var current = getStyle(element, attr) * 100;

          //目标的透明度放大100倍

          var target = json[attr] * 100;

          var step = (target - current) / 10;

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

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

          element.style[attr] = current / 100;

        } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex

          //层级改变就是直接改变这个属性的值

          element.style[attr] = json[attr];

        } else {

          //普通的属性

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

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

  }

  //zIndex:1000

  //透明度: 数字类型----小数---放大100倍

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

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

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

      animate(my$("dv"), {"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000});

    });

  };

</script>

</body>

</html>

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

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

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

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

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

  3. GSAP JS基础教程--使用缓动函数

    今天来了解一下缓动easeing函数. 开始,如果你还没有GSAP的类包,可以到GreenSock的官网去下载最新版本的类包,或者直接点击这里​来下载 学习之前,先来准备一下:     <!DO ...

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

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

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

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

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

    封装缓动动画函数---增加多个任意多个属性 在原来缓动动画函数,增加任意一个属性的基础上,做了如下改变 1. 原来function animate(element, attr, target),三个变 ...

  7. 【WPF学习】第五十一章 动画缓动

    线性动画的一个缺点是,它通常让人觉得很机械且不能够自然.相比而言,高级的用户界面具有模拟真实世界系统的动画效果.例如,可能使用具有触觉的下压按钮,当单击时按钮快速弹回,但是当没有进行操作时它们会慢慢地 ...

  8. WPF界面设计技巧（7）—模拟电梯升降的缓动动画

    原文:WPF界面设计技巧(7)-模拟电梯升降的缓动动画 如同Flash一样,WPF的亮点之一也在于其擅于表现平滑的动画效果,但以移动动画来说,仅凭简单的起始位置.目标位置,所产生的动画仍会非常生硬,这 ...

  9. js 变速动画函数

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

随机推荐

  1. linux awk进阶篇

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

  2. 如何在SQL Server 2008下轻松调试T-SQL语句和存储过程

    一.回顾早期的SQL SERVER版本:早在SQL Server 2000时代,查询分析器的功能还很简陋,远不如VS那么强大.到SQL Server 2005时代,代码高亮.SQL优化等功能逐渐加强, ...

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

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

  4. matlab 降维工具 转载【https://blog.csdn.net/tarim/article/details/51253536】

    降维工具箱drtool   这个工具箱的主页如下,现在的最新版本是2013.3.21更新,版本v0.8.1b http://homepage.tudelft.nl/19j49/Matlab_Toolb ...

  5. Educational Codeforces Round 34 (Rated for Div. 2) A B C D

    Educational Codeforces Round 34 (Rated for Div. 2) A Hungry Student Problem 题目链接: http://codeforces. ...

  6. Thinkphp5——数据库表名的大小写问题

    ThinkPHP5中数据库的表名如果是驼峰命名法,会被转换成小写加下划线,解决方法如下: 1.表名全部小写,因为数据库的表名区分大小写的. 2.使用Db::table("表名"), ...

  7. Python微信公众号教程基础篇——收发文本消息

    1. 概述: 在本篇教程中,你将学会使用华为云弹性云服务器(以下简称 ECS)搭建微信公众号处理后台,使用Python语言编写对应的微信消息处理逻辑代码,接收从微信服务端转发过来的消息,并返回处理结果 ...

  8. nginx的部署及配置文件的介绍 域名 用户认证 SSL加密模块

    步骤一:构建Nginx服务器 yum -y install gcc pcre-devel openssl-devel        #安装依赖包 wget   http://nginx.org/dow ...

  9. MySQL必知必会(组合Where子句，Not和In操作符)

    SELECT prod_id, prod_price, prod_name FROM products ; SELECT prod_id, prod_price, prod_name FROM pro ...

  10. swift实现单例的四种方式

    单例模式 单例模式是设计模式中最简单的一种,甚至有些模式大师都不称其为模式,称其为一种实现技巧,因为设计模式讲究对象之间的关系的抽象,而单例模式只有自己一个对象. 当你只需要一个实例的时候需要使用单例 ...