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

相较之前的，增加了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. k8s 获取 Pod ip 添加到环境变量

    0x00 事件 有一个需要将 Pod 自身的 ip 地址添加到环境变量的需求,可以在 yaml 文件的 env 中这样设置: env: - name: POD_OWN_IP_ADDRESS value ...

  2. Java基础IO类之字节输入输出流

    一.IO流概述 1.IO流:输入输出流(Input/Output) 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象,即数据在设备间的传输流, 流的本质是数据传输,根据数据传输特性将 ...

  3. day02_Requests模块

    1.anaconda的安装 1.1 .安装可执行程序 1.2 .配置环境变量 ​ 根据环境变量的先后顺序去查找可执行程序文件,如果查找到就执行,如果查找不到就报错. ​ anaconda主要配置: ​ ...

  4. python 2.x 中print >> sys.out ,print 与sys.out.write()的关系

    print 会调用 sys.stdout 的 write 方法 以下两行在事实上等价: sys.stdout.write('hello,python'+'\n') print 'hello,pytho ...

  5. 伪共享 FalseSharing (CacheLine，MESI) 浅析以及Java里的解决方案

    起因 在阅读百度的发号器 uid-generator 源码的过程中,发现了一段很奇怪的代码: /** * Represents a padded {@link AtomicLong} to preve ...

  6. gulp+webpack+angular1的一点小经验（第一部分gulp与webpack的整合）

    时间匆匆如流水继上周熟悉了gulp的初步安装与环境配置以后,我的项目又进入了新的阶段! 这篇文章将把我这一周遇到的一些问题,以及解决的方式做一个小小的总结,不一定记的完整,但都是个人的一点经验,分享给 ...

  7. 转:SSL 握手协议详解

    SSL 握手协议详解 RSA作为身份认证,ECDHE来交换加密密钥,AES/DES等作为加密. 如果RSA来加解密,那么身份认证后,直接用认证后的RSA公钥解密.不需要再额外交换加密密钥了. 相关报文 ...

  8. MyCat学习 ------分库分表 随笔

    垂直切分.水平切分 1.垂直分库,解决库中表太多的问题. 2.垂直分表,解决表中列太多的问题.例如 商品表 包含 产地.二维码 .时间.价格.各个列.分为不同的小表. 水平切分, 大数据表拆分为小表 ...

  9. 报错 Please make sure you have the correct access rights and the repository exists （git 添加ssh密钥 ）

    1.设置Git的user name和email $ git config --global user.name "wubaiwan" $ git config --global u ...

  10. bundle 的生成和使用

    一.bundle 的生成 1.打开XCode,创建iOS版用的bundle资源包,有两种方式:第一种直接将工作,open in  finder.在目录中直接新建文件夹,文件夹以bundle格式.文件夹 ...