动画函数封装：设置任意的一个元素,移动到指定的目标位置

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>title</title>

  <style>

    div{

      width: 200px;

      height: 200px;

      background-color: red;

      /*脱离文档流*/

      position: absolute;

    }

  </style>

  <script>

    //设置任意的一个元素,移动到指定的目标位置

    function animate(element, target) {

      clearInterval(element.timeId);

      //定时器的id值存储到对象的一个属性中

      element.timeId = setInterval(function () {

        //获取元素的当前的位置,数字类型

        var current = element.offsetLeft;

        //每次移动的距离

        var step = 10;

        step = current < target ? step : -step;

        //当前移动到位置

        current += step;

        if (Math.abs(current - target) > Math.abs(step)) {

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

        } else {

          //清理定时器

          clearInterval(element.timeId);

          //直接到达目标

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

        }

      }, 20);

    }

  </script>

</head>

<body>

</body>

</html>

JS---动画函数封装：设置任意的一个元素,移动到指定的目标位置的更多相关文章

  1. 求从n个数组任意选取一个元素的所有组合

    最近做项目碰到这个问题,如题从n个数组任意选取一个元素的所有组合.比如已知数组是[1, 3]; [2, 4]; [5]; 最后组合结果是[1, 2, 5]; [1, 4, 5];  [3, 2, 5] ...

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

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

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

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

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

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

  5. JS——tab函数封装

    1.为li标签添加index属性,这个属性正好就是span标签数组的index值 2.函数封装适合页面有多个tab切换,需要注意的在获取的li标签和span标签对象时,必须将对应div对象作为参数传入 ...

  6. 泛型（二）封装工具类CommonUtils-把一个Map转换成指定类型的javabean对象

    1.commons-beanutils的使用 commons-beanutils-1.9.3.jar 依赖 commons-logging-1.2.jar 代码1: String className ...

  7. js多种方法取数组的最后一个元素

    一: pop()方法 pop()方法,删除数组最后一个并返回该元素 利用这个方法可以取到数组的最后一个,同理shift()可以取到数组的第一个(shift()删除数组第一个并返回该元素) var ar ...

  8. JS 抖动函数封装

    原生JS实现封装的抖动函数框架 <style> ul{ margin-top: 100px; } li { float: left; margin-left: 20px; position ...

  9. js 时间函数封装

    html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

随机推荐

  1. Spring IOC初始化深度解析

    1.前言 本文是基于JAVA配置方法对Spring IOC进行分析,掌握Spring IOC初始化流程对于我们更好的使用Spring.学习Spring还是很有帮助的,本文所使用的的Spring版本为5 ...

  2. PowerMock学习（九）之Mock Answer的使用

    关于Mock Answer 上一篇文章,有介绍过关于Arguments Matche的使用,其实 Answer的作用与其比较类似,但是它比 Arguments Matcher 更加强大. Argume ...

  3. CentOS 7 Keepalive 脚本不执行解决

    目录 问题 问题一 括号问题 问题二 脚本名称问题 问题 起因是在测试部署 Altls + Keepalive 高可用读写分离,测试停止Atlas服务的时候,发现Keepalive不会自动主从切换,就 ...

  4. Ansible 介绍和安装

    目录 Ansible 介绍 环境准备 Ansible安装 配置秘钥管理 配置Inventory文件 简单测试连通性 Ansible 介绍 运维工具分类: agent: puppet, func 这类都 ...

  5. linux中安装tensorflow

    liunxsudo apt-get install python-pip python-dev python2.X -> pippython3.X -> pip3 pip --versio ...

  6. ThinkPHP5入门（基础篇）

    ThinkPHP是一个快速.简单的基于MVC和面向对象的轻量级PHP开发框架,自2006年诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简代码的同时,尤其注重开发体验和易用性,并且拥有众多的 ...

  7. 大型情感剧集Selenium：2_options设置 #华为云·寻找黑马程序员#

    上集回顾 昨天说简单介绍了什么是selenium,它能干what,和发展史与梗概.当的是python如何通过pip安装selenium,并下载对应浏览器的webdriver. 最后简单通过一个Demo ...

  8. Quantitative proteomics of Uukuniemi virus-host cell interactions reveals GBF1 as proviral host factor for phleboviruses（乌库涅米病毒-宿主细胞互作的定量蛋白质组学揭示了GBF1是个白蛉病毒的前病毒宿主因子）-解读人：谭亦凡

    期刊名:Molecular & Cellular Proteomics 发表时间:(2019年12月) IF:4.828 单位:1德国海德堡大学附属医院2德国汉诺威医科大学3德国亥姆霍茲感染研 ...

  9. hibernate查询方式（二）

    1.HQL查询(hibernate query language) 操作的是实体类和属性 *查询所有记录 //1.hql查询操作会使用Query对象 // (1)写sql语句 创建Query对象, S ...

  10. 最短路 & 差分约束 总结

     一.引例      1.一类不等式组的解 二.最短路       1.Dijkstra       2.图的存储       3.链式前向星       4.Dijkstra + 优先队列      ...