一、实现原理：

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. error LNK2001: unresolved external symbol __imp___rt_sdiv

    这个问题搞了我 5 天(包括双休日), 我一定要记录下来. 问题描述 用 Visual Studio 2008 编译 WinCE 7 平台的应用程序,编译没问题,链接时出现了一堆 Link error ...

  2. Python--day30--tcp协议（建立链接三次握手，断掉链接四次挥手）和UDP协议

    TCP协议: tcp是可靠的,面向连接的.建立全双工通信. 建立链接的三次握手 链接一旦建立一定是全双工工通信,必然是双方通信. UDP协议: TCP协议和UDP协议的对比: QQ使用的是UDP,因为 ...

  3. java一维数组的声明与初始化

    一维数组:可以理解为一列多行.类型相同的数据,其中每个数据被称为数组元素: 一维数组的声明方式: type varName[]; 或 type[] varName;(推荐) Eg:int age[]; ...

  4. Vue实现同级组件的通信

    一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.index.html <!DOCTYP ...

  5. vue在渲染之前拿到数据操作.......vue数据获取

    异步请求数据,但是生命周期函数也是异步的,怎么才能保证渲染之前就能拿到数据呢? 官方给了两种方案, 我们可以在异步获取数据的时候加上一个loading表示现在在获取数据..... 由于ajax是异步操 ...

  6. jekyll 添加 Valine 评论

    本文告诉大家如何在自己搭建的静态博客添加 Valine 评论.在这前,我基本都是使用 多说,但是多说gg啦,所以就在找一个可以替换的评论 本来 Disqus是很好的,但是在国内很难打开,所以我就需要一 ...

  7. UVA 11732——Trie

    解题思路: 首先我们可以发现: 1.若两个字符串A.B不相等,且它们的公共前缀为S,则它们的比较次数为:2 * len(S) + 1: 2.若两个字符串相等,设为A,则它们的比较次数为 2 * ( l ...

  8. mysql ”Invalid use of null value“ 解决方法

    1.问题描述 因为要更改"information"表中的"编号"列为非空,使用数据库查询语句“alter table information modify '编 ...

  9. ORACLE 两表关联更新三种方式

    不多说了,我们来做实验吧. 创建如下表数据 select * from t1 ; select * from t2; 现需求:参照T2表,修改T1表,修改条件为两表的fname列内容一致. 方式1,u ...

  10. Xgboost参数调节

    转自:https://segmentfault.com/a/1190000014040317 整体: # 1.调试n_estimators cv_params = {'n_estimators': [ ...