原生javascript 基础动画原理
一、实现原理:
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 基础动画原理的更多相关文章
- 原生javascript 基础动画函数封装(二)
<!DOCTYPE html> <html> <head> <title></title> <style type="tex ...
- 原生javascript 基础动画函数封装(一)
<!DOCTYPE html> <html> <head> <title></title> <style type="tex ...
- 原生JavaScript中动画与特效的实现原理
现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...
- 浅谈原生JavaScript的动画和特效
一.JavaScript中的动画原理 动画效果的实现总的来说可分为两种,一种是利用纯css实现,该方法在css3成熟后广泛应用:另外一种是通过JavaScript(或者一些封装的库如jQuery的an ...
- javascript基础-DOM原理
解释清楚DOM原理并不是一件容易的事,但是任何一个前端工程师,都必须牢牢掌握它. DOM整体架构: 图解: DOM,即针对XML文档的应用程序编程接口(API).通俗一点说,HTML属于XML的一种, ...
- 原生javascript 固定表头原理与源码
我在工作中需要固定表头这个功能,我不想去找,没意思.于是就写了一个,我写的是angularjs 自定义指令 起了个 "fix-header" ,有人叫 "freeze- ...
- 原生 javascript 基础回顾
(1)打开新窗口 语法: window.open([URL], [窗口名称], [参数字符串]) 参数说明: URL:可选参数,在窗口中要显示网页的网址或路径.如果省略这个参数,或者它的值是空 字符串 ...
- javascript基础-BOM原理
图解: 1. Loction: 拼接参数时,应编码decodeURIComponent/encodeURIComponent(). 2. History: pushState+replaceStat ...
- js中动画原理
现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...
随机推荐
- 在 Jenkins Windows Agent 节点上执行 Shell 命令
Jenkins 在 Windows agent 上执行shell 命令,听起来很有意思,以下方法可以在 Jenkins 中执行一些简单的 shell 脚本,如果是复杂脚本就交给 Linux agent ...
- H3C PAP验证配置示例
- 最小生成树prim、
过年那几天确实没好好学习.在老家闲着也是闲着.可是就是没看书. 回来这几天又一直在弄个人博客.买域名云服务器备案什么的- -. 麻烦死了呢. 在腾讯花1块钱备案了一个网站www.goodgoodstu ...
- Netty进行文件传输
本次是利用TCP在客户端发送文件流,服务端就接收流,写入相应的文件. 实验的源文件是一个图片,假设地址是D:\\Koala.jpg,接收保存后的图片为D:\\test.jpg 原理就是将文件读取成by ...
- Python--day46--上节内容回顾及补充
1,union(把两张表连起来,以上下的方式):具有自动去重的功能,有相同的就去掉. 结果: 2,union all就没有去重的功能 3,临时表,指定映射,条件,三元运算
- 【t050】方程求解
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 要求Xi(i = 1,2,3,4)是一个[-T..T]中的整数,满足方程AX1 + BX2 + CX3 ...
- centos虚拟机Ping不通网关
centos虚拟机Ping不通网关 今天在VMware中安装了centos mini版本,安装完成后,用xshell连接一直连不上,本来以为是mini版本没有安装ssh server,于是就用命令: ...
- 微软软件开发技术二十年回顾-API篇(转)
二. API篇 随着Windows操作系统开始占据主导地位,开发Windows平台下的应用程序成为人们的需要.当然,这也为传统的DOS程序员提供了一种新的编程方法-一种不受设备限制并由事件驱动的编程方 ...
- OPENWRT X86 安装使用教程 (未完成)
目 录 一 下载 Openwrt 镜像文件 二 将镜像文件写入目标磁盘 2.1 写盘工具 2.2 Physdiskwrite 写盘 2.3 win32diskimager 写盘 三 管理界面 3. ...
- 【Linux】ssh-copy-id三步实现ssh免密登陆
一.本地机器上使用ssh-keygen产生公钥私钥对 ssh-keygen -t rsa -C "XXXX@163.com" --->执行完会在~/.ssh/下生成公钥私钥对 ...