变速动画函数封装

匀速动画：每次步数都是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. 从面试官甄别项目经验的角度，说说如何在简历中写项目经验（java后端方向）

    在大多的JD(职位介绍)里,会写明该职位需要xx时间的相关经验,换句话说就是需要在简历中看到一定年限的相关商业项目经验,否则估计连面试的机会都没. 在本文里,不讨论这种门槛是否合理,而会以Java相关 ...

  2. yum运行报错：libcurl.so.4: cannot open shared object file: No such file or directory

    /usr/lib64/目录下存在libcurl.so.4文件 CURL的动态库找不到,这里我们加入到ld.so.conf [root@localhost bin]#  vim /etc/ld.so.c ...

  3. mysql的事物，外键，与常用引擎

    ### part1 时间类型 date YYYY-MM-DD 年月日 (出现日期) time HH:MM:SS 时分秒 (竞赛时间) year YYYY 年份值 (红酒年份 82年矿泉水) datet ...

  4. IIS+PHP上传文件大小限制和上传时间限制，iis7和iis8上传文件大小限制和上传时间限制

    先说IIS这边的配置                                                                  一:点击站点“管理”下的“配置编辑器”. 二:设 ...

  5. 企业DevOps研发模式下CI/CD实践详解指南

    阅读全文大概需要 10分钟. 1. 前言 借着公司今年新组建的中台研发部东风,我作为其中的主要负责人,在研发中心主导推行DevOps研发管理模式转变及质量管理创新建设,本篇文章摘取自今年9月底,笔者在 ...

  6. 带着canvas去流浪系列之四 绘制散点图

    [摘要] 用原生canvasAPI实现百度Echarts图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI ...

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

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

  8. 华为云BigData Pro解读： 鲲鹏云容器助力大数据破茧成蝶

    华为云鲲鹏云容器 见证BigData Pro蝶变之旅大数据之路顺应人类科技的进步而诞生,一直顺风顺水,不到20年时间,已渗透到社会生产和人们生活的方方面面,.然而,伴随着信息量的指数级增长,大数据也开 ...

  9. 学习ThinkPHP的第21天---关联预载入、关联统计

    ThinkPHP关联预载入 预载入的作用是减少执行SQL语句,进而提升程序的性能. public function join(){ //用于监听SQL Db::listen(function ($sq ...

  10. git配置文件—— .gitattributes

    目录 .gitattributes 文档 1. gitattributes文件以行为单位设置一个路径下所有文件的属性,格式如下: 2. 在gitattributes文件的一行中,一个属性(以text属 ...