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

<!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. 折腾笔记-计蒜客T1158-和为给定数AC记

    欢迎查看原题 1.简单题目叙述 蒜头君给出若干个整数,询问其中是否有一对数的和等于给定的数. 输入格式 共三行: 第一行是整数 ),表示有 n 个整数. 第二行是 n 个整数.整数的范围是在 0 到  ...

  2. 为什么服务器突然回复RST——小心网络中的安全设备

    RST产生原因 一般情况下导致TCP发送RST报文的原因有如下3种:    1. SYN数据段指定的目的端口处没有接收进程在等待.        2.TCP想放弃一个已经存在的连接.    3.TCP ...

  3. 浅析scrapy与scrapy-redis的区别

    首先,要了解两者的区别,就要清楚scrapy-redis是如何产生的,有需求才会有发展,社会在日新月异的飞速发展,大量相似网页框架的飞速产生,人们已经不满足于当前爬取网页的速度,因此有了分布式爬虫,让 ...

  4. JavaScript-----3.变量

    1.变量的使用 变量在使用的时候分两步:1. 声明变量 2. 赋值 1.1声明变量 //声明变量 var age;//声明一个名字为age的变量 var是JS的一个关键字,用于声明变量,使用该关键字声 ...

  5. 2753:走迷宫（dfs+初剪）//可以说是很水了。。。

    总时间限制:  1000ms 内存限制:  65536kB 描述 一个迷宫由R行C列格子组成,有的格子里有障碍物,不能走:有的格子是空地,可以走.给定一个迷宫,求从左上角走到右下角最少需要走多少步(数 ...

  6. 【BZOJ2190】【Luogu P2158】 [SDOI2008]仪仗队

    前言: 更不好的阅读 这篇题解真的写了很久,改了又改才成为这样的,我不会写题解但我正在努力去学,求通过,求赞... 题目: BZOJ Luogu 思路: 像我这样的数论菜鸡就不能一秒切这题,怎么办呢? ...

  7. 2019-2020-5 20199317《Linux内核原理与分析》第五周作业

    第4章 系统调用的三层机制(上) 1  用户态.内核态和中断 大多数程序员在写程序时很难离开系统调用,与系统调用打交道的方式是通过库函数的方式,库函数用来把系统调用给封装起来. 计算机的硬件资源是有限 ...

  8. ubuntu安装过程中遇到的一些问题及解决办法。

    由于ubuntu与win10的双系统安装过程百度一下就有很多,在此不再赘述. (其实主要是忘记拍照片了,我一个菜鸡说得肯定也没有那些大佬们好,但网上确实也很多哈,加上有中文引导安装,问题不大.) 此篇 ...

  9. Netty学习——Google Protobuf的初步了解

    学习参考的官网: https://developers.google.com/protocol-buffers/docs/javatutorial 简单指南详解:这个文档写的简直是太详细了. 本篇从下 ...

  10. spring boot 一个项目启动多个实例

    0.前言 在开发中,我们经常需要以不同端口启动同一个项目的多个实例,IDEA中启动多个实例很简单 1.方法 1.1.在项目中,选择编辑配置,然后点选允许并行运行,如下图: 1.2.调出RunDashb ...