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

<!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. leetcode 114二叉树转换成链表

    解法一 可以发现展开的顺序其实就是二叉树的先序遍历.算法和 94 题中序遍历的 Morris 算法有些神似,我们需要两步完成这道题. 将左子树插入到右子树的地方 将原来的右子树接到左子树的最右边节点 ...

  2. 网页解析之BeautifulSoup

    介绍及安装 Beautiful Soup 是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. BeautifulSoup 用来解析 HTML 比较简单,API非常人 ...

  3. 程序员的算法课（16）-B+树在数据库索引中的作用

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/m0_37609579/article/de ...

  4. Django4模型（操作数据库）

    模型入门同步数据库的两个指令创建模型注意事项1.外键ForeignKey 模型入门 同步数据库的两个指令 python manage.py makemigrations python manage.p ...

  5. obs命令行工具obsutil的使用测试

    test1 批量复制,目标文件夹ggggg-zyx0809/data/tmp/a0文件夹已存在,不使用flat命令,目标路径包含a0文件夹 操作 从ggggg-zyx0809/data/g_cageg ...

  6. Python中的Tcp协议的应用之Tcp服务端程序开发

    TCP通信协议是面向连接的可靠的网络通信协议. 网络间想要进行数据传输必须要用到socket,socket翻译过来叫做套接字,其主要作用是不同设备或同一台设备之间的进程通信工具. Python中的Tc ...

  7. go实践之apiserver搭建

    文章目录 go实践之apiserver搭建 1.配置文件读取 2.数据连接 3.日志初始化 4.server初始化 5.接口编写 go实践之apiserver搭建 本文主要记录下博主用gin搭建app ...

  8. rsync服务的讲解

    第2章 rsync备份服务器的搭建 2.1 rsync备份服务器的概念 2.1.1 概念 rsync服务器对网站服务器数据进行备份(防止数据丢失和数据进行恢复) rsync服务器对网站服务器数据进行对 ...

  9. Bean 字段复制利器 MapStruct

    本文聊一个工具类,MapStruct ,它是一个在 dto,po(do/entity),vo 等这些 pojo 中转换字段的一个工具,在应用中经常有这样的转换,在 spring 和 apache-co ...

  10. vue项目中使用腾讯地图

    最近在使用腾讯地图api(以下以位置数据可视化API为例),在初建项目之后,按照官网的说法,直接引入 再将官网的初始化例子放一个方法 在mounted中调用即可看到腾讯地图,但是我引入之后,一直报TM ...