一、实现原理：

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

2、设置定时器

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

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

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

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

二、代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. *{ margin:0;padding: 0;}
  7. div{position: absolute; width: 100px; height: 100px; background: red; left: 0;top: 100px;}
  8. </style>
  9. </head>
  10. <body>
  11. <button id="btn">开始</button>
  12. <div id="box"></div>
  13.  
  14. <script type="text/javascript">
  15. window.onload = function(){
  16. var btn = document.getElementById('btn');
  17. var box = document.getElementById('box');
  18. var speed;
  19.  
  20. btn.onclick = function(){
  21. // 1、开定时器前先清除定时器
  22. clearInterval(box.timer);
  23. // 2、设置定时器
  24. box.timer = setInterval(function(){
  25. // 3、当前元素的位置 + 每一步的长度
  26. speed = box.offsetLeft + 11;
  27. // 4、当元素当前位置超过目标点时，把当前位置==目标点
  28. speed > 800 ? speed = 800 : null;
  29. // 5、设置元素位置，开始运动
  30. box.style.left = speed +'px';
  31. // 6、判断当前位置如果到达目标点，则清除定时器
  32. if(speed == 800){
  33. clearInterval(box.timer);
  34. }
  35.  
  36. },20)
  37. }
  38. }
  39. </script>
  40. </body>
  41. </html>
  42. 　　

原生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. 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？

    响应式网站设计(Responsive Web design)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及 使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局,无论用户 ...

  2. Python--day65--模板语言之filter

    参考的原文链接:http://www.cnblogs.com/liwenzhou/p/7931828.html Filters(过滤器) 在Django的模板语言中,通过使用 过滤器 来改变变量的显示 ...

  3. 如何让in/exists 子查询(半连接)作为驱动表？

    一哥们问我,怎么才能让子查询作为驱动表? SQL如下: select rowid rid from its_car_pass7 v where 1 = 1 and pass_datetime > ...

  4. java 泛型的嵌套（map例子）

    package july7; //泛型加Map的输出! import java.util.Iterator; import java.util.Map; import java.util.Map.En ...

  5. 2018-8-10-win10-uwp-获取文件夹出错

    title author date CreateTime categories win10 uwp 获取文件夹出错 lindexi 2018-08-10 19:16:50 +0800 2018-2-1 ...

  6. 如何在centos 7.4 上安装 python 3.6

    yum -y install https://centos7.iuscommunity.org/ius-release.rpmyum -y install python36uyum -y instal ...

  7. 关于POSTMAN做并发压测

    一开始我个人在做测试时用到了POSTMAN,用了两种方式做测试, 第一种: 测试发现这种方式是阻塞排队,我让接口睡两秒,这100次请求间隔就是2秒,是串行执行 于是想到第二种,在一个collectio ...

  8. 2019-9-20-SharpDx-的代替项目

    title author date CreateTime categories SharpDx 的代替项目 lindexi 2019-09-20 09:13:59 +0800 2019-09-20 0 ...

  9. 【30.01%】【hdu 3397】Sequence operation

    Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submissio ...

  10. wpf passwobox 添加水印

    之前有做过wpf texbox添加水印,这个并不难 重写一下样式就可以了,今天用到了passwordbox 添加水印的时候 发现还是有点难度的. 这个难度就在于如何去取password的长度来控制水印 ...