变速动画函数封装

匀速动画：每次步数都是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 P4779】dijkstra算法的堆优化

    Luogu P4779 利用堆/优先队列快速取得权值最小的点. 在稠密图中的表现比SPFA要优秀. #include<iostream> #include<cstdio> #i ...

  2. 架构师成长之路5.2-Saltstack远程执行

    点击架构师成长之路 架构师成长之路5.2-Saltstack远程执行 配置管理工具: Pupper:1. 采用ruby编程语言:2. 安装环境相对较复杂:3.不支持远程执行,需要FUNC工具配置才可以 ...

  3. webpack到底是干什么用的？

    转载于:https://segmentfault.com/a/1190000014148611?utm_source=tag-newest 概念问题一:什么是webpack和grunt和gulp有什么 ...

  4. int main (int argc, const char * argv[0]) 中参数的含义；指针数组和数组指针

    恩,有的编译器初始化时候会产生这样的参数 argc是命令行总的参数个数,argv[]是argc个参数,其中第0个参数是程序的全名 1. 几种C++ 常见的参数种类 int main(void); in ...

  5. python logging模块小记

    1.简单的将日志打印到屏幕 import logging logging.debug('This is debug message') logging.info('This is info messa ...

  6. vue如何引入图片地址

    我们在用vue时储存图片时,一般把图片放在两种文件下,一个是static文件夹下,另外一个是assets文件夹下. 下面总体说一下这两个的区别及正确的引用方式: static是放不会变动的图片(或文件 ...

  7. Apache和PHP结合、Apache默认虚拟主机

    5月28日任务 课程内容: 11.14/11.15 Apache和PHP结合11.16/11.17 Apache默认虚拟主机 11.14/11.15 Apache和PHP结合 到目前为止虽然安装好了A ...

  8. LNMP架构源码搭建（centos7）

    第一步:安装nginx 1.上传或下载nginx,并解压 yum -y install lrzsz rz .tar.gz 2.搭建nginx安装环境 yum -y install gcc-c++ zl ...

  9. 告别编码5分钟，命名2小时！史上最全的Java命名规范参考！

    简洁清爽的代码风格应该是大多数工程师所期待的.在工作中笔者常常因为起名字而纠结,夸张点可以说是编程5分钟,命名两小时!究竟为什么命名成为了工作中的拦路虎. 每个公司都有不同的标准,目的是为了保持统一, ...

  10. IT网址 插件 系统 软件 网址收集！

    http://www.css88.com http://www.runoob.com/jquery/jquery-plugin-validate.html http://www.iteye.com/n ...