一、实现原理：

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. ThinkPHP5.1接收post、get参数

    我们要先认识的是请求对象Request类 <?php//要用Request类 第一步就要引入他,才能在当前控制器上使用//知识点:use 与 namespace前面不可有空格等其他操作.name ...

  2. HBuider快捷键

    朋友推荐用Hbuilder编辑器,看了下Hbuilder官网和那视频,感觉牛逼哄哄的, 自己也就体验了一下,打开Hbuilder的快捷键列表,每个快捷键都体验了一下,以下展示出来的,每一个都是精华,每 ...

  3. P1112 区间连续段

    题目描述 给你一个长度为n的数组 \(a_1, a_2, \dots a_n\) . 一开始这n个元素都为0. 然后有m次操作,每次操作有两种操作类型: update x y a:将区间 \([x,y ...

  4. UVA 11922 Permutation Transformer —— splay伸展树

    题意:根据m条指令改变排列1 2 3 4 … n ,每条指令(a, b)表示取出第a~b个元素,反转后添加到排列尾部 分析:用一个可分裂合并的序列来表示整个序列,截取一段可以用两次分裂一次合并实现,粘 ...

  5. H3C 显示RIP当前运行状态及配置信息

  6. win10 uwp 发布旁加载自动更新

    在很多企业使用的程序都是不能通过微软商店发布,原因很多,其中我之前的团队开发了很久的应用,结果发现没有用户能从微软应用商店下载所以我对应用商店没有好感.但是作为一个微软粉丝,怎么能不支持 UWP 开发 ...

  7. 2019-7-12-wpf-VisualBrush-已知问题

    title author date CreateTime categories wpf VisualBrush 已知问题 lindexi 2019-7-12 21:7:41 +0800 2018-2- ...

  8. linux 一个写缓存例子

    我们已经几次提及 shortprint 驱动; 现在是时候真正看看. 这个模块为并口实现一个非 常简单, 面向输出的驱动; 它是足够的, 但是, 来使能文件打印. 如果你选择来测试这个 驱动, 但是, ...

  9. next-i18next 常见Bug记录

    TypeError: Cannot read property 'wait' of null 此处根本原因为next版本(使用withNamespaces导入命名空间报错) ^5.0.0版本不支持导入 ...

  10. onload事件属性，JQ中的load,ready方法

    onload事件属性,JQ中的load,ready方法 前言 页面中的很多操作,需要我们在所需资源下载完成后,才可以进行操作,而资源没有及时下载,我们进行操作的话,是会报错.因此我们需要熟练掌握哪些事 ...