变速动画函数封装

匀速动画：每次步数都是10 (var step=10;)

变速(缓动)动画：每次的步数是用当前位置和目标位置相减 var step=(target-current)/10;

代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>title</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    div {

      margin-top: 20px;

      width: 200px;

      height: 100px;

      background-color: green;

      position: absolute;

      left: 0;

      top: 0;

    }

  </style>

</head>

<body>

  <input type="button" value="移动到400px" id="btn1" />

  <input type="button" value="移动到800px" id="btn2" />

  <div id="dv">

    <script src="common.js"></script>

    <script>

      //点击按钮移动div

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

        animate(my$("dv"), 400);

      };

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

        animate(my$("dv"), 800);

      };

      //变速动画函数

      function animate(element, target) {

        //清理定时器

        clearInterval(element.timeId);

        element.timeId = setInterval(function () {

          //获取元素的当前位置

          var current = element.offsetLeft;

          //移动步数

          var step = (target - current) / 10;

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

          current += step;

          element.style.left = current + "px";

          if (current == target) {

            //清理定时器

            clearInterval(element.timeId);

          }

          //测试代码

          console.log("目标位置:" + target + "，当前位置:" + current + "，步数:" + step);

        }, 20);

      }

    </script>

  </div>

</body>

</html>

JS---变速动画函数封装的更多相关文章

  1. js变速动画函数封装 回调函数及层级还有透明度

    //点击按钮,改变宽度到达一个目标值,高度到达一个目标值 //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { re ...

  2. js 变速动画函数

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

  3. 从零开始学 Web 之 BOM（三）offset，scroll，变速动画函数

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. js进阶ajax函数封装（匿名函数作为参数传递）（封装函数引入文件的方式非常好用）

    js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...

  5. 原生JS实现动画函数的封装

    封装了一个JS方法,支持元素的基本动画:宽.高.透明度...等,也支持链式动画和同时运动. 获取元素的属性的函数并进行了兼容性处理: function getStyle(obj, attr) { if ...

  6. 移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）

    移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...

  7. 移动端滑屏全应用【一】cssHandler操作基础动画函数封装

    前言: 大家都知道,在移动端进行操作结点移动时,我们都会使用操作transform来代替top等用以提高性能,必要的时候还可开启3d加速.我们都会使用getComputedStyle来获取结点的最终样 ...

  8. 原生javascript 基础动画函数封装(二)

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  9. javascript动画函数封装（升级版）

    //把 任意对象 的 任意数值属性 改变为 任意的目标值 function animate(obj, json, fn) { clearInterval(obj.timer); obj.timer = ...

  10. javascript动画函数封装

    function animate(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function () { var ...

随机推荐

  1. Lab6：进程的调度

    CPU调度 从就绪队列中挑选下一个占用CPU运行的进程,从多个可用CPU中挑选就绪进程可使用的CPU资源 调度策略 比较调度算法的准则 CPU使用率 吞吐量 周转时间 就绪等待时间 响应时间 吞吐量与 ...

  2. 题解——面积(area.cpp)

    题目来源&题面简述: 思路与算法选择: 只有*里面的部分对我们有用,所以可以将 *号外的部分标记一下. 可以用著名的BFS大法实现此过程.(连通块) 连通块模板: #include<bi ...

  3. tensorflow：模型的保存和训练过程可视化

    在使用tf来训练模型的时候,难免会出现中断的情况.这时候自然就希望能够将辛辛苦苦得到的中间参数保留下来,不然下次又要重新开始. 保存模型的方法: #之前是各种构建模型graph的操作(矩阵相乘,sig ...

  4. 源码分析— java读写锁ReentrantReadWriteLock

    前言 今天看Jraft的时候发现了很多地方都用到了读写锁,所以心血来潮想要分析以下读写锁是怎么实现的. 先上一个doc里面的例子: class CachedData { Object data; vo ...

  5. Xamarin.Forms 学习系列之优秀UI收集

    1.各种优秀UI例子 https://github.com/jsuarezruiz/xamarin-forms-goodlooking-UI 输入框例子 https://github.com/enis ...

  6. 【java】使用java.util的【Collections】简化List创建

    我们在创建一个List并往其中加入一个元素的时候一般会这么做: public List<User> getCurrentUser() { List<User> users = ...

  7. openssl的移植

    下载openssl1.1并解压,进入openssl根目录,执行配置命令 ./Configure linux-armv4 --prefix=$(pwd)/__install 这里使用当前目录下的__in ...

  8. 基于Docker搭建分布式消息队列Kafka

    本文基于Docker搭建一套单节点的Kafka消息队列,Kafka依赖Zookeeper为其管理集群信息,虽然本例不涉及集群,但是该有的组件都还是会有,典型的kafka分布式架构如下图所示.本例搭建的 ...

  9. 在华为云ECS上手工通过Docker部署tomcat

    本文介绍了如何在华为云上ECS上手工通过Docker部署tomcat,并提供了Docker常用操作 一.环境准备 ECS:操作系统版本:    CentOS Linux release 7.6.181 ...

  10. DevOps on DevCloud|如何实现应用接口的混合驱动测试

    引言:在"DevOps能力之屋(Capabilities House of DevOps)"中,华为云DevCloud提出(工程方法+最佳实践+生态)×工具平台=DevOps能力. ...