变速动画函数封装

匀速动画：每次步数都是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. 【Luogu P2002&P2341】消息扩散/受欢迎的奶牛

    Luogu P2002 Luogu P2341 使用强连通分量算法缩点 第一题统计入度为0的个数强连通分量数. 第二题的答案为当且仅当仅有一个强连通分量的出度为0时该强连通分量的节点数,原因如下:若一 ...

  2. 开源WPF控件库MaterialDesignInXAML推荐

    今天介绍一个开源的C# WPF开源控件库,非常漂亮,重点是开源哦 WPF做桌面开发是很有优势的,除了微软自带的控件外,还有很多第三方的控件库,比如收费的Dev Express For WPF.Tele ...

  3. Selenium+Java（四）Selenium Xpath元素定位

    前言 关于Selenium元素定位,这是最后一篇博客. Xpath定位可以实现的功能 Selenium+Java(三)Selenium元素定位中讲的定位方式也可以实现,具体要用那种定位方式要根据自己的 ...

  4. ##* %%* linux变量处理

    链接来自他们分享,,,, 如有侵权,请联系本人删除,本人将立即删除.停止分享. https://blog.csdn.net/fengzijinliang/article/details/4252021 ...

  5. rep()函数简介

    rep()函数:重复 rep(x,...) rep.int(x,times) rep_len(x,length.out) ·x:一个向量(vector),一个因子(factor),一个POSIXct或 ...

  6. Day01-初识 Python

    1.CPU/内存/硬盘/操作系统 CPU :计算机的运算和处理中心,相当于人类的大脑. 内存 :暂时存储数据,临时加载数据应用程序. 硬盘 :长期存储数据. 操作系统:一个软件,连接计算机的硬件与所有 ...

  7. python_排序

    快速排序 基本思想是:从一个数组中随机选出一个数N,通过一趟排序将数组分割成三个部分,1.小于N的区域 2.等于N的区域 3.大于N的区域,然后再按照此方法对小于区的和大于区分别递归进行,从而达到整个 ...

  8. Android DataBinding不能自动生成ViewDataBinding类的解决方法

    如果Build.gradle和Layout文件配置正确,仍无法生成ViewDataBinding类. 经测试,Gradle的sync无效,clean project无效,invalidate and ...

  9. PHP和JavaScript中奖概率算法

    这是一个经典的概率算法. 现在有数组:[10, 20, 30, 40] . 假设对应中奖几率:特等奖10%,一等奖20%,二等奖30%,三等奖40%,总共100%. 算法开始时,从数组中选出一个值$v ...

  10. shell 点命令和source指令

    1 shell脚本执行方法 有两种方法执行shell scripts,一种是新产生一个shell,然后执行相应的shell scripts:一种是在当前shell下执行,不再启用其他shell.新产生 ...