关于javascript的运动教程
一、javascript的匀速运动
关于物体的javascript匀速运动要点分析：
1.物体关于运动的时候，我们要打开定时器
2.打开定时器的时候我们记得要在停止的时候关闭定时器，同时应该注意的是一开始加载的时候，我们也应该关闭定时器，避免多次重复的加载，导致的加速运动。
3.并且速度初始化为0
实施方法：
判断物体的偏移是否小于目标值（判断运动的速度）
小于 可以继续运动 大于向右运动
2。先判断什么地方停下来？
判断条件：物理的偏移量小于7就是不能超过速度的值时
直接让它对齐
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript匀速运动</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:500px;}
span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}
</style>
<script>
window.onload = function()
{
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onclick = function()
{
startMove(oDiv, 300);
};
};
var timer = null;
function startMove(obj, iTarget)
{
clearInterval(timer);
timer = setInterval(function(){
var iSpeed = 0;
if(obj.offsetLeft < iTarget)
{
iSpeed = 7;
}
else
{
iSpeed = -7;
}
if( Math.abs( obj.offsetLeft - iTarget ) < 7 )
{
clearInterval(timer);
obj.style.left = iTarget + 'px';
}
else
{
obj.style.left = obj.offsetLeft + iSpeed + 'px';
}
}, 30);
}
</script>
</head>
<body>
<button id="btn1">移动</button>
<div id="div1"></div>
<!--span为一条线-->
<span></span>
</body>
</html>
二、javascript变速运动
要点分析：
1.如何做到变加速运动？利用目标值与偏差值（obj.offsetLeft）的差去除以一个定值，因为偏差值（obj.offsetLeft）会随着时间的改变而改变，从而达到一个变速的目的
2.判断速度大于0 向上取整 小于0向下取整
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>缓冲运动</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:0;}
span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}
</style>
<script>
window.onload = function()
{
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onclick = function()
{
startMove(oDiv, 300);
};
};
var timer = null;
function startMove(obj, iTarget)
{
clearInterval(timer);
timer = setInterval(function(){
var iSpeed = (iTarget - obj.offsetLeft)/8;
iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iTarget==obj.offsetLeft){
clearInterval(timer);
}else{
obj.style.left = obj.offsetLeft + iSpeed + 'px';
}
}, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="移动" />
<div id="div1"></div>
<span></span>
</body>
</html>
三、javascript的弹性运动
1.开始做一个减速运动
2.在减速运动中添加一个摩擦运动
//做一个加速度减缓的变加速欲动 加速度 iSpeed += (iTarget - obj.offsetLeft)/5; //控制速度的减缓量 摩擦力 iSpeed *= 0.7; //向左移动的距离 left += iSpeed;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
</style>
<script>
window.onload = function()
{
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onclick = function()
{
startMove(oDiv, 300);
};
};
var iSpeed = 0;
var left = 0;
function startMove(obj, iTarget)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//做一个加速度减缓的变加速欲动 加速度
iSpeed += (iTarget - obj.offsetLeft)/5;
//控制速度的减缓量 摩擦力
iSpeed *= 0.7;
//向左移动的距离
left += iSpeed;
//速度小于1并且距离差小于1时停止并且将目标值赋予块
if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){
clearInterval(obj.timer);
obj.style.left = iTarget + 'px';
}else{
obj.style.left = obj.offsetLeft + iSpeed + 'px';
}
}, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="运动" />
<div id="div1"></div>
<div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; "></div>
</body>
</html>
关于javascript的运动教程的更多相关文章
- JavaScript 核心参考教程 内置对象
这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft).Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言,从 ...
- Canvas API -- JavaScript 标准参考教程（alpha）
Canvas API -- JavaScript 标准参考教程(alpha) Canvas API
- 大量Javascript/JQuery学习教程电子书合集
［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人 不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pd ...
- ［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
- 阅读：重新介绍 JavaScript（JS教程）
这篇文章是记录自己阅读重新介绍 JavaScript(JS 教程)的记录和个人体会 在线调试代码工具:https://codepen.io/pen 引言 分歧根源:名字Javascript和Java有 ...
- 急速JavaScript全栈教程
3 天前 · 3k 次阅读 急速JavaScript全栈教程 javascript node.js mongodb 140 自从一年前发布了Vuejs小书的电子书,也有些日子没有碰过它们了,现在 ...
- [转载]javascript+ajax+jquery教程11--正则表达式
原文地址:javascript+ajax+jquery教程11--正则表达式作者:morflame 正则表达式可以: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个 ...
- JavaScript全栈教程
这是小白的零基础JavaScript全栈教程. JavaScript是世界上最流行的脚本语言,因为你在电脑.手机.平板上浏览的所有的网页,以及无数基于HTML5的手机App,交互逻辑都是由JavaSc ...
- day38—JavaScript的运动基础-匀速运动
转行学开发,代码100天——2018-04-23 一.运动基础框架 JavaScript的运动可以广义理解为渐变效果,直接移动效果等,图网页上常见的“分享到”,banner,透明度变化等.其实现的基本 ...
随机推荐
- JavaScript原型OOP——你上车了吗？
.title-bar { width: 80%; height: 35px; padding-left: 35px; color: white; line-height: 35px; font-siz ...
- C++四种类型转换方式。
类型转换有c风格的,当然还有c++风格的.c风格的转换的格式很简单(TYPE)EXPRESSION,但是c风格的类型转换有不少的缺点,有的时候用c风格的转换是不合适的,因为它可以在任意类型之间转换,比 ...
- 全局变量：global与$GLOBALS的区别和使用
今天在写框架的时候想把SaeMySQL初始化之后作为全局变量使用.但是后来发现PHP中的全局变量和Java或者OC中的全局变量还是有较大区别的.下面记录一下php里面的global的使用相关注意事项. ...
- 分布式任务&分布式锁（li）
目前系统中存在批量审批.批量授权等各个操作,批量操作中可能因为处理机器.线程不同,造成刷新缓存丢失授权等信息,如批量审批同一用户权限多个权限申请后,流程平台并发的发送多个http请求到acl不同服务器 ...
- CentOS6.8 修改主机名（1）
1.临时修改主机名 显示主机名:spark@master:~$ hostnamemaster修改主机名:spark@master:~$ sudo hostname hadoopspark@mast ...
- JDBC关于时间的存取
Oracle数据库默认时间存储是java.sql.date,而java程序中的时间默认是java.util.date,所以通过JDBC存取的 时候会涉及到时间的转换问题. 1.日期存取 存入数据库的时 ...
- java接口调用——webservice就是一个RPC而已
很多新手一听到接口就蒙逼,不知道接口是什么!其实接口就是RPC,通过远程访问别的程序提供的方法,然后获得该方法执行的接口,而不需要在本地执行该方法.就是本地方法调用的升级版而已,我明天会上一篇如何通过 ...
- 关于Three.js基本几何形状之SphereGeometry球体学习
一.有关球体SphereGeometry构造函数参数说明 <1>.SphereGeometry(radius, widthSegments, heightSegments, phiStar ...
- jQuery+css3侧边栏导航菜单
效果体验:http://hovertree.com/texiao/jquery/37/ 代码如下: <!doctype html> <html lang="zh" ...
- JS正则表达式（JavaScript regular expression）
RegExp直接量和对象的创建 就像字符串和数字一样,程序中每个取值相同的原始类型直接量均表示相同的值,这是显而易见的.程序运行时每次遇到对象直接量(初始化表达式)诸如{}和[]的时候都会创建新对象. ...