认识js运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{width:100px; height: 100px; background-color: red; position: absolute; left: 0px; top: 100px}
</style>
<script>
/*
实现动画
人眼能够识别的最小间隔 18帧 1秒18张图片 运动中的问题
1、不会停
2、速度在取某些值的时候不会停
3、到达目的值以后，点击还会往前运动
需要通过if...else将运动和停止分开
4、重复点击，启动多个定时器，速度越来越快
保证，在统一时间只能有一个定时器启动。 每次启动定时器之前，先将上一次的定时器关闭。 运动框架总结:
1、运动和停止分开
if...else
2、每次启动定时器之前，先将上一次定时器关闭。 */ window.onload = function(){
var oDiv = document.getElementById("div1");
var timer = null;
document.onclick = function(){
var speed = 7;
clearInterval(timer);
timer = setInterval(function(){ if(oDiv.offsetLeft >= 500){
clearInterval(timer);
}else{
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
}, 30);
}
}
</script>
</head>
<body>
<div id = 'div1'></div>
</body>
</html>
浏览器效果：
认识js运动的更多相关文章
- 带无缝滚动的轮播图（含JS运动框架）
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- js运动框架之一条乱跑的虫子
克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...
- JS运动从入门到兴奋1
hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌 ...
- 关于js运动的一些总结
js运动实现,有两种.一种是速度版,另一种是时间版. 速度版是通过对速度的加减乘除,得出元素的运动数据.时间版是通过对时间进行Tween公式运算,得出元素的运动数据. 速度版运动优点:容易在运动过程中 ...
- JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js运动动画
原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...
- 第八节 JS运动基础
运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
- JS运动 - 无缝滚动和缓动动画
JS运动 - 无缝滚动和缓动动画 无缝滚动原理:首先先复制两张图片(第一张和第二张)放到最后面;ul绝对定位,如果ul的left值大于等于4张图片的宽度,就应该快速复原为0. html <!DO ...
- 解析JS运动
解析JS运动 物体运动原理:通过改变物体的位置,而发生移动变化. 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值)+vt. 方法: 1.运动的物体使用绝对定位 ...
- move.js运动插件
move.js 运动插件是一款针对元素动画效果的插件.可以运用此插件制作出各类元素效果. 插件GitHub地址:https://github.com/visionmedia/move.js 下面整理学 ...
随机推荐
- css 中ul li 与 ul>li的区别
ul li :后代选择器,ul 里所有的 li 元素,包括 ol 里的 li ; ul>li :子代选择器,下一级的DOM节点,不包括 ol 里的 li . ul>ol>li :子代 ...
- 运用Zabbix实现内网服务器状态及局域网状况监控（3） —— Zabbix服务端安装
1. Zabbix服务端安装,基于LNMP PHP5.5+Nginx1.9安装配置:http://www.cnblogs.com/vurtne-lu/p/7707536.html MySQL5.5编译 ...
- tcp.validnode_checking踩过的坑
对Oracle 检查ip合法性,就必须在服务器端的sqlnet.ora文件中设置如下参数 TCP.INVITED_NODES=(10.0.0.36,10.0.0.1,10.0.0.35) TCP.EX ...
- Codeforces 264 B. Good Sequences
B. Good Sequences time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
- PHP7 学习笔记（六）403 Forbidden - WAMP Server 2.5
今天在wamp目录下有一个项目:comment 我在我的Windows 7机器上安装了WAMP版本2.5. 当浏览器浏览到本地主机时,WAMP服务器页面是可见的. 但是当我浏览到我的本地主机在我的移动 ...
- 六道JavaScript测验题
1.找出数字数组中最大的元素(使用Match.max函数) var a=[123,23432,345,3,34]; console.log(Math.max.apply(null,a)); 2.转化一 ...
- Safari导入Chrome书签
浏览器使用频率非常高,书签栏可以定时整理,我习惯使用Chrome,有时候也使用Safari所以难免需要同步Chrome书签到Safari 操作详见下面操作
- C# 对List中的Object进行排序
首先定义一个List类,这个类里面包含了Name和Total两个属性变量,下面就是针对这两个变量进行排序. public class Player { public string Name { get ...
- JS禁止右键查看源码，禁止复制，复制内容到剪切板
有时候我们希望自己的网页源码不被查看,这时需要关掉鼠标的右击事件;有时候我们也希望禁止选择页面内容Ctrl+C复制. 1.禁止右键查看源码; <script> //设置右键事件 funct ...
- mysql服务里面没有启动项
解决:5.0版本:开始->运行->cmd,进到mysql安装的bin目录D:\MySQL\bin>mysqld.exe -installService successfully in ...