JS-匀速运动-运动停止
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>匀速运动停止条件</title>
<style type="text/css">
a{display: block;}
input[type='button']{
margin-top: 5px;
}
.div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 200px;
cursor: pointer;
}
.div2{
width: 1px;
height: 1200px;
position: absolute;
left: 300px;
top: 0;
background-color: blueviolet;
/*用这个标杆,发现div1并没有走到300的准确位置,原因是?*/
}
.div3{
width: 1px;
height: 1200px;
position: absolute;
left: 100px;
top: 0;
background-color: blueviolet;
/*用这个标杆,发现div1并没有走到300的准确位置,原因是?*/
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn');
var oBtn2 = document.getElementById('btn2');
oBtn.onclick = function(){
start(100);
}
oBtn2.onclick = function(){
start(300);
}
}
var timer = null;
function start(iTarget){
var oDiv = document.getElementById('div');
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if(oDiv.offsetLeft<iTarget){
speed = 7;
}else{
speed = -7;
}
//这种个情况就是速度不能被整除的时候会出现的问题。
//思路就像到一个地方下车,距离近了就算到了,不一定分要撞到墙上才算到了。
// ?解决方法:Math.abs():绝对值,一个数,正负号都取正值
if(Math.abs(iTarget-oDiv.offsetLeft)<=7){
clearInterval(timer);
//oDiv.style.left = iTarget;
//最后忘了加px,所以还是有点距离有点问题。
oDiv.style.left = iTarget+'px';
}else{
oDiv.style.left = oDiv.offsetLeft+speed+'px';
document.title = oDiv.offsetLeft+','+speed;
} },30);
} </script>
</head> <body>
<input type="button" value="到100" id="btn" />
<input type="button" value="到300" id="btn2" />
<div class="div" id="div"></div>
<div class="div2"></div>
<div class="div3"></div> </body> </html>
智能社的开发教程:原址:https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc
JS-匀速运动-运动停止的更多相关文章
- [Js]弹性运动
描述:像弹簧一样左右弹动,最后缓慢停下来 一.加减速运动 1.加速运动 var iSpeed=0;iSpeed++; 速度越来越快,最后冲出去 2.减速运动 var iSpeed=20;iSpeed- ...
- [Js]高级运动
一.链式运动框架 1.他需要一个回调函数,在运动停止时,开始下一次运动(执行函数) 多物体运动框架改为如下: function startMove(obj,attr,iTarget,fn){ ... ...
- JS缓冲运动案例:右侧居中悬浮窗
JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...
- JS缓冲运动案例:右下角悬浮窗
JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...
- JS的运动1(从简单到复杂运动,从单一属性到多属性同时进行的运动过程分析)
js运动原理 运动基础 在js中,让一个元素动起来的最简单的方式,就是点击按钮,让元素移动.下面是一个简单的案例:(下面几个案例的的html和css都是采用这个为例) <!DOCTYPE htm ...
- js匀速运动框架案例
点击"开始运动"按钮,红色的#red区块开始向右匀速运动,抵达到黑色竖线位置自动停止,再次点击"开始运动"#red区块也不会再运动.同时为了便于后期维护,要求运 ...
- [Js]缓冲运动
一.运动框架 1.在开始运动时,关闭已有定时器(否则会不断有新的定时器执行) 2.把运动和停止隔开(if/else) 二.缓冲运动 逐渐变慢,最后停止(距离越远速度越大) 速度=(目标值-当前值)/缩 ...
- JS完美运动框架
这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (o ...
- js匀速运动停止条件
匀速运动,怎么让它到达指定位置时停止呢? 原理: 1,物体和目标的差值距离小于等于速度时,即停止 2,接着让物体移动位置等于目标位置 示例:匀速运动停止 html部分 <input type=& ...
- js缓冲运动
缓冲运动 现象:逐渐变慢,最后停止 原理:距离越远,速度越大 速度的计算方式: 1,速度由距离决定 2,速度=(目标值-当前值)/缩放系数 说明:速度为正负数时,也决定了物体移动的方向 示例:div缓 ...
随机推荐
- Userdata
我们首先关心的是如何在Lua中表示数组的值.Lua为这种情况提供专门提供一个基本的类型:userdata.一个userdatum提供了一个在Lua中没有预定义操作的raw内存区域. Lua API提供 ...
- JVM中的垃圾回收
GC 垃圾回收回收什么 Java的内存分配原理与C/C++不同.C/C++每次申请内存时都要malloc进行系统调用.而系统调用发生在内核空间,每次都要中断进行切换,这须要一定的开销. 而Java虚拟 ...
- Winform控件:保存文件对话框(SaveFileDialog)
SaveFileDialog用于保存文件 1.新建Winform窗体应用程序,命名为SaveFileDialogDemo. 2.在界面上添加一个按钮的控件(用于打开保存文件对话框),添加文本控件,用于 ...
- js学习笔记29----拖拽
原理:先计算鼠标与拖拽目标的左侧距离 跟 上面距离,再计算拖动后的位置. 示例代码: <!DOCTYPE html> <html lang="en"> &l ...
- Oracle 存储过程错误之PLS-00201: 必须声明标识符
转自:http://blog.csdn.net/u010678947/article/details/20702149 错误: ORA-06550: 第 1 行, 第 7 列: PLS-00201: ...
- e647. 处理鼠标移动事件
component.addMouseMotionListener(new MyMouseMotionListener()); public class MyMouseMotionListener ex ...
- 《Java程序猿面试笔试宝典》之组合与继承有什么差别
组合和继承是面向对象中两种代码复用的方式. 组合是指在新类里面创建原有类的对象,反复利用已有类的功能.继承是面向对象的主要特性之中的一个,它同意设计人员依据其他类的实现来定义一个类的实现. 组合和继承 ...
- qlineedit控件获得焦点
出处:http://blog.sina.com.cn/s/blog_640531380100wld9.html qlineedit控件获得焦点 lineEdit->setFocus();
- Centos下查看和修改网卡Mac地址
linux/Centos下查看网卡Mac地址,输入命令: #ifconfig -a eth0 Link encap:Ethernet HWaddr 00:e4:56:2E:D8:20 00:e4:56 ...
- mac Virtualbox Ubuntu 设置共享目录
如果要用VirtualBox自带的共享文件夹功能,必须先安装Guest Additions.安装方法:置顶的菜单条->devices->Install Guest Additions.点击 ...