一、实现原理：

1、开定时器前先清除定时器

2、设置定时器

3、当前元素的位置 + 每一步的长度

4、当元素当前位置超过目标点时，把当前位置==目标点

5、设置元素位置，开始运动

6、判断当前位置如果到达目标点，则清除定时器

二、代码

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

*{ margin:0;padding: 0;}

div{position: absolute; width: 100px; height: 100px; background: red; left: 0;top: 100px;}

</style>

</head>

<body>

<button id="btn">开始</button>

<div id="box"></div>

<script type="text/javascript">

window.onload = function(){

var btn = document.getElementById('btn');

var box = document.getElementById('box');

var speed;

btn.onclick = function(){

// 1、开定时器前先清除定时器

clearInterval(box.timer);

// 2、设置定时器

box.timer = setInterval(function(){

// 3、当前元素的位置 + 每一步的长度

speed = box.offsetLeft + 11;

// 4、当元素当前位置超过目标点时，把当前位置==目标点

speed > 800 ? speed = 800 : null;

// 5、设置元素位置，开始运动

box.style.left = speed +'px';

// 6、判断当前位置如果到达目标点，则清除定时器

if(speed == 800){

clearInterval(box.timer);

}

},20)

}

}

</script>

</body>

</html>

　　

原生javascript 基础动画原理的更多相关文章

  1. 原生javascript 基础动画函数封装(二)

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  2. 原生javascript 基础动画函数封装(一)

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  3. 原生JavaScript中动画与特效的实现原理

    现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...

  4. 浅谈原生JavaScript的动画和特效

    一.JavaScript中的动画原理 动画效果的实现总的来说可分为两种,一种是利用纯css实现,该方法在css3成熟后广泛应用:另外一种是通过JavaScript(或者一些封装的库如jQuery的an ...

  5. javascript基础-DOM原理

    解释清楚DOM原理并不是一件容易的事,但是任何一个前端工程师,都必须牢牢掌握它. DOM整体架构: 图解: DOM,即针对XML文档的应用程序编程接口(API).通俗一点说,HTML属于XML的一种, ...

  6. 原生javascript 固定表头原理与源码

    我在工作中需要固定表头这个功能,我不想去找,没意思.于是就写了一个,我写的是angularjs 自定义指令 起了个 "fix-header" ,有人叫  "freeze- ...

  7. 原生 javascript 基础回顾

    (1)打开新窗口 语法: window.open([URL], [窗口名称], [参数字符串]) 参数说明: URL:可选参数,在窗口中要显示网页的网址或路径.如果省略这个参数,或者它的值是空 字符串 ...

  8. javascript基础-BOM原理

    图解:  1. Loction: 拼接参数时,应编码decodeURIComponent/encodeURIComponent(). 2. History: pushState+replaceStat ...

  9. js中动画原理

    现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...

随机推荐

  1. C# TransactionScope 事务类

    微软自带的TransactionScope(.Net Framework 2之后)是个好东东,提供的功能也很强大. 首先说说TransactionScope是什么,并能为我们做什么事情.其实看Tran ...

  2. LA 5031 Graph and Queries —— Treap名次树

    离线做法,逆序执行操作,那么原本的删除边的操作变为加入边的操作,用名次树维护每一个连通分量的名次,加边操作即是连通分量合并操作,每次将结点数小的子树向结点数大的子树合并,那么单次合并复杂度O(n1lo ...

  3. H3C 环路避免机制五：抑制时间

  4. UVA 11992 ——线段树（区间修改）

    解题思路: 将矩阵每一行建立一棵线段树,进而变成一维问题求解.注意数组要开 4*N 代码如下: #include <iostream> #include <cstdio> #i ...

  5. C# 将 Begin 和 End 异步方法转 task 异步

    在 .NET Framework 有两个不同的异步方法,一个是 Asynchronous Programming Model (APM) 另一个是 Task-based asynchronous pa ...

  6. H3C设置时间--用户视图下

    <H3C>clock datetime ?   TIME  Specify the time (HH:MM:SS) <H3C>clock datetime 19:29:00 ? ...

  7. C# 性能分析 反射 VS 配置文件 VS 预编译

    本文分析在 C# 中使用反射和配置文件和预编译做注入的性能,本文的数据是为预编译框架,开发高性能应用 - 课程 - 微软技术暨生态大会 2018 - walterlv提供 本文通过代码生成工具,使用C ...

  8. Linux 内核同步 urb

    不幸的是, 同步 urb 没有一个象中断, 控制, 和块 urb 的初始化函数. 因此它们必须在 驱动中"手动"初始化, 在它们可被提交给 USB 核心之前. 下面是一个如何正确初 ...

  9. koa2--08.koa-session的使用

    首先安装 koa-session中间件 //koa-session的使用 const koa = require('koa'); var router = require('koa-router')( ...

  10. How to parse version range

    Now we are making a solution that has to get the package reference. But the version of package refer ...