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

相较之前的，增加了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. 【2018寒假集训 Day2】【动态规划】抢金块

    抢金块 输入文件:gold.in 输出文件:gold.out 问题描述: 地面上有一些格子,每个格子上面都有金块,但不同格子上的金块有不同的价值,你一次可以跳S至T步 .如果S=2,T=4.你就可以跳 ...

  2. JavaScript笔记二

    1.表格 - 在网页中可以通过表格来表示一些格式化的数据 - 表格相关的标签 - <table> 用来创建一个表格 - <tr> 表示表格中的一行 - <th> 表 ...

  3. Python文件和数据格式化（教程）

    文件是一个存储在副主存储器的数据序列,可包含任何数据内容. 概念上,文件是数据的集合和抽象,类似的,函数是程序的集合和抽象. 用文件形式组织和表达数据更有效也更加灵活. 文件包括两种形式,文本文件和二 ...

  4. CCNA 之 综合实验

    CCNA 综合实验 需要:根据下列图中的网路拓扑,搭建环境; PC1属于VLAN10:PC2属于VLAN20:网关均在OR_C2811: VLAN10.20对应的网段分别为192.168.10.0.2 ...

  5. 图的存储结构与操作--C语言实现

    图(graph)是一种比树结构还要复杂的数据结构,它的术语,存储方式,遍历方式,用途都比较广,所以如果想要一次性完成所有的代码,那代码会非常长.所以,我将分两次来完成图的代码.这一次,我会完成图的五种 ...

  6. 【Python成长之路】从零学GUI -- 制作智能聊天机器人

    [写在前面] 鹏哥:最近老惹小燕同学不开心,结果都没人陪我聊天了.哎,好无聊呀! 肥宅男:女朋友什么的最无聊了,还没我的图灵机器人好玩. 鹏哥:图灵?好巧,和我部门同名. [效果如下] [实现过程] ...

  7. Python爬虫批量下载糗事百科段子，怀念的天王盖地虎，小鸡炖蘑菇...

    欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动",获取华 ...

  8. 有奖投票丨HC2019开发者关注的TOP10问题你最想听哪个？

    目前,人工智能已经成为广大开发者重点关注的技术领域.然而,随着人工智能技术的快速发展,AI应用场景复杂度在与日俱增,算法调教也亟需不断成熟,这些都为开发者们带来了更多全新的挑战.如何快速把握前沿技术的 ...

  9. 洛谷 题解 P1842 【奶牛玩杂技】

    本蒟蒻又双叒叕被爆踩辣! Solution: 我们先看数据,50000,那么O(n)或者O(n log(n))是可以过的,非严格O(n * sqrt(n))要卡卡常,说不定也可以过. 那么什么算法可以 ...

  10. hdu2199，double二分

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2199 题意:给一个Y,求满足8*x^4 + 7*x^3 + 2*x^2 + 3*x + 6 == Y的 ...