js多个物体运动的问题1
问题2
http://www.cnblogs.com/huaci/p/3854304.html
用js写一个物体的运动很简单。如果一个页面有多个物体在运动,它会不会出问题呢?
ok,我们来看一个示例
让多个div变宽
现象:onmouseover时,div宽度变宽;onmouseout时,div恢复原大小
html部分
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<style>
div { width:100px; height:30px; margin:10px; background:green;}
</style>
js部分
<script> window.onload = function(){
var aDiv = document.getElementsByTagName("div"); for(var i=0; i<aDiv.length; i++){
aDiv[i].onmouseover = function(){
startMove(this,400);
}
aDiv[i].onmouseout = function(){
startMove(this,100);
}
}
} var timer = null;
function startMove(obj, iTarget){
clearInterval(timer);
timer = setInterval(function(){
var speed = (iTarget - obj.offsetWidth)/6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(obj.offsetWidth == iTarget){
clearInterval(timer);
} else {
obj.style.width = obj.offsetWidth + speed + "px";
} },30);
}
</script>
运行后,
问题:当鼠标在几个div之间来回切换操作时,发现之间的div停住了,收不回去了
原因:分析上面代码,原来是进入一个新的div操作时,把之前的所有定时器都给关了
一句话:整个程序就只有一个定时器
解决:为每个运动对象,都定义一个定时器
只开启和关闭当前操作的这个运动对象的定时器
现在给出修改后的完整代码啊
完整示例:
<script> window.onload = function(){
var aDiv = document.getElementsByTagName("div"); for(var i=0; i<aDiv.length; i++){
aDiv[i].timer = null;
aDiv[i].onmouseover = function(){
startMove(this,400);
}
aDiv[i].onmouseout = function(){
startMove(this,100);
}
}
} function startMove(obj, iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (iTarget - obj.offsetWidth)/6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(obj.offsetWidth == iTarget){
clearInterval(obj.timer);
} else {
obj.style.width = obj.offsetWidth + speed + "px";
} },30);
}
</script>
下一节,问题2
http://www.cnblogs.com/huaci/p/3854304.html
js多个物体运动的问题1的更多相关文章
- js多个物体运动问题2
问题1 http://www.cnblogs.com/huaci/p/3854216.html 在上一讲问题1,我们可以整理出2点: 1,定时器作为运动物体的属性 2,startMove方法,参数要传 ...
- js动画---多物体运动
对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...
- JS定时器做物体运动
JS定时器是函数 setInterval(函数体/函数名 , 时间) 清楚定时器 clearInterval(函数) 时间单位(毫秒) 1000毫秒 = 1秒 首先我们要知道用JS定时器能干什么? ...
- js实现多物体运动框架并兼容各浏览器
首先,我们须要知道在js中获取对象的宽度如offsetWidth等.可能会存在一些小小的bug.原因之中的一个在于offsetWidth只不过获取盒子模型中内容的部分宽度.并不包括内边距,边框和外边距 ...
- js 运动函数篇 (一) (匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动)层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...
- js动画之多物体运动
多个物体这不能使用一个定时器了,要给每个物体一个定时器 <!DOCTYPE html> <html lang="en"> <head> < ...
- [js]多个物体的运动
与单个的区别:得知道哪个在动,所以运动函数需要两个参数,出了目标iTarget之外,还要obj.另外需要多个计数器,否则当一个还没运动完就移入另一个物体会发生卡壳 window.onload=func ...
- three.js之让物体动起来方式(一)移动摄像机
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【unity3d游戏开发脚本笔记之一:坐标系选择对物体运动的影响】
时间:2016年9月24日17:38:21 作者:yexiaopeng 博客园 在unity3d的世界中,其坐标系可分为四种,世界坐标系-WorldSpace 本地坐标系-LocalS ...
随机推荐
- android中设置TextView/Button 走马灯效果
在Android的ApiDemo中,有Button的走马灯效果,但是换作是TextView,还是有一点差异. 定义走马灯(Marquee),主要在Project/res/layout/main.xml ...
- HDU1385 【输出字典序最小的最短路】
这题经过的结点比较好处理. 主要是字典序的处理. 先是floyd做法,采用记录后驱的方法. path[i][j]=j[初始化...] #include <iostream> #inclu ...
- Python的经典问题——中文乱码
关键字:Python UTF-8 GBK 中文 乱码 估计入门时都会遇到的.我是在windows下用的Python25自带的IDLE编辑运行的,发现运行脚本得出的结果有一些中文显示是乱码,但有一些是正 ...
- VSTO 为Office已有右键菜单添加自己的菜单项(word,Excel)
原文:VSTO 为Office已有右键菜单添加自己的菜单项(word,Excel) private void AddRightMenu() { Microsoft ...
- fopen()惹的祸
读一个文件,刚开始只读“r” 打开,读数据,刚开始的一段数据还好,但只读了一小部分就读不到正确的数据了,后来反复的看自己的代码,比对文件的内容,纠结了一天了都,感觉什么都没写错啊.心里总认为是这个文 ...
- c++ 如何获取系统时间 - zjnig711的信息仓库 - 博客频道 - CSDN.NET
c++ 如何获取系统时间 - zjnig711的信息仓库 - 博客频道 - CSDN.NET c++ 如何获取系统时间 分类: C/C++ 2008-05-08 22:15 14115人阅读 评论(5 ...
- Wix学习整理(1)——快速入门HelloWorld
原文:Wix学习整理(1)--快速入门HelloWorld 1 Wix简介 Wix是Windows Installer XML的简称,其通过类XML文件格式来指定了用于创建Windows Instal ...
- ThinkPHP中的volist标签中使用eq标签出错
参考地址:http://blog.csdn.net/luquansen/article/details/18310855 源码: <volist id="v" name=&q ...
- iScreenLocker 3.1.8 安卓锁屏通知--苹果一样的体验
*软件介绍: 苹果锁屏通知(iScreenLocker)是一款android上ios风格的锁屏软件.它颠覆安智通知设计,将原来状态栏的通知搬到锁屏界面上来,能够在桌面轻松收发短信,微博,微信等消息.它 ...
- 分布式消息系统Jafka入门指南之二
分布式消息系统Jafka入门指南之二 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 三.Jafka的文件夹结构 1.安装tree命令 $ sudo yu ...