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

相较之前的，增加了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. Java多线程编程(5)--线程间通信

    一.等待与通知   某些情况下,程序要执行的操作需要满足一定的条件(下文统一将其称之为保护条件)才能执行.在单线程编程中,我们可以使用轮询的方式来实现,即频繁地判断是否满足保护条件,若不满足则继续判断 ...

  2. Chapter 05—Advanced data management(Part 1)

    一. R的数学函数,统计函数及字符处理函数 例01:一道实际应用题 一组学生其数学,科学和英语的成绩如下表: 任务:根据成绩,决定对每个学生的单独指导: 前20%的学生的成绩为A,次之为B,以此类推: ...

  3. python_迭代器和生成器、字节串、字节数组

    迭代器 iterator  和 生成器 generator 什么是迭代器:迭代器就是获取迭代对象中元素的工具,迭代器是由可迭代对象生成的 1.迭代器是指用iter(可迭代对象)函数返回的对象(实例) ...

  4. 小白的springboot之路（八）、继承Redis以及@Cacheable注解实现Redis缓存

    0.前言 在项目中,缓存作为一种高效的提升性能的手段,几乎必不可少,Redis作为其中的佼佼者被广泛应用: 一.spring boot集成Redis 1.添加依赖 <dependency> ...

  5. 小熊派IoT开发板系列教程正式发布——免费学习

    [摘要] 小熊派开源社区针对小熊派IoT开发板首次规划了小熊派未来的系列教程.从基础到进阶的设计,可适应具有不同基础的开发者,通过该系列教程的学习,开发者能够轻松掌握IoT产品的开发.该系列教程包括单 ...

  6. 一条数据的HBase之旅，简明HBase入门教程2：数据模型

    [摘要] 上一篇文章讲了HBase项目与应用概况信息,这篇文章讲述HBase的数据模型以及一些基础概念,数据模型可以说决定了HBase适合于什么应用场景. 华为云上的NoSQL数据库服务CloudTa ...

  7. 基于webpack实现多html页面开发框架六 提取公共代码

    一.解决什么问题 1.如果a.js和b.js都引用了common.js,那在打包的时候common.js会被重复打入到a.js和b.js,造成重复打包 2.单独打包common.js对性能有帮助,浏览 ...

  8. python 拷贝文件夹下的文件 到 另一个文件夹

    import os,shutil def copy_search_file(srcDir, desDir): ls = os.listdir(srcDir) for line in ls: fileP ...

  9. node - 流 浅析

    概念 流(stream)是 Node.js 中处理流式数据的抽象接口. stream 模块用于构建实现了流接口的对象. Node.js 提供了多种流对象. 例如,HTTP 服务器的请求和 proces ...

  10. windows系统安装git

    一.下载git的安装包 git官网的下载地址:https://git-scm.com/download/win 选择自己的机型进行安装. 二.安装配置 一直点下一步就可以 安装完毕之后,打开电脑命令窗 ...