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

相较之前的，增加了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. scss--函数 (Functions)--unit

    (Sass::Script::Value::String) unit($number) Returns the unit(s) associated with a number. Complex un ...

  2. python--数字灯管

    import turtle import time def drawLine(draw): #绘制单段数码管 turtle.pendown() if draw else turtle.penup() ...

  3. 视频转GIF+GIF录制

    GIF录制 Windows--oCam oCam使用非常简便,它还可以用来录音,录制视频,并且是单文件版,很小,使用也非常方便,如果用来录制GIF,大家导出录制的视频选择GIF格式就可以了: Wind ...

  4. 阿里架构师花近十年时间整理出来的Java核心知识pdf（Java岗）

    由于细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容! 整理了一份Java核心知识点.覆盖了JVM.锁.并发.Java反射.Spring原理.微服务.Zooke ...

  5. Java数组与C/C++数组的区别

    C数组一维数组: 定义方式:datatype arrayname[length]数组是一个整体,在内存中是连续的: 初始化:1:可以只给部分赋值int a[5] = {1,2}; 剩下的自动赋值为02 ...

  6. Python中的Tcp协议应用之TCP服务端-协程版（推荐）

    利用gevent第三方库,实现协程. 通过协程实现一个服务端服务多个客户端需求. 使用协程的好处是协程比线程更加节省内存资源. gevent安装命令: pip3 install gevent 注意:在 ...

  7. Python中 * 与 **， *args 与 **kwargs的用法

    * 用于传递位置参数(positional argument) ** 用于传递关键字参数(keyword argument) 首先,先通过一个简单的例子来介绍 * 的用法: def add_funct ...

  8. Unknown class XXViewController in Interface Builder file.”问题处理

    “Unknown class XXViewController in Interface Builder file.”问题处理   在静态库中写了一个XXViewController类,然后在主工程的 ...

  9. LightOJ 1253 Misere NIM(反NIM博弈)

    Alice and Bob are playing game of Misère Nim. Misère Nim is a game playing on k piles of stones, eac ...

  10. 通过ansible自动化部署zabbix应用

    zabbix在实际的应用中,可能需要监控的主机非常多,而每个主机的操作系统类型.版本也都不尽相同,在这种环境下,通过手动安装zabbix的agent端已经不现实了,此时就需要借助自动化工具完成zabb ...