JavaScript实现多个物体同时运动
本文实例为大家分享了JavaScript实现多个物体同时运动的具体代码，供大家参考，具体内容如下
1、多个物体同时运动
---例子：多个Div，鼠标移入变宽
单定时器，存在问题
每个Div一个定时器
2、多物体运动框架
定时器作为物体的属性
参数的传递：物体、目标值
---例子：多个Div淡入淡出
所有东西都不能公用
属性与运动对象绑定：速度、其他属性值（如透明度等）
3、多个Div，鼠标移入变宽的例子
3.1 代码
<head>
<meta charset="UTF-8">
<title>多物体运动框架</title>
<style type="text/css">
div {
width: 100px;
height: 50px;
background: red;
margin-top: 50px;
}
</style>
<script type="text/javascript">
window.onload = function() {
//获取元素
var aDiv = document.getElementsByTagName("div");
for (var i = 0; i < aDiv.length; i++) {
aDiv[i].onmousemove = function() {
startMove(this, 300);
}
aDiv[i].onmouseout = function() {
startMove(this, 100);
}
}
}
//运动函数
function startMove(obj, iTarget) {
//清楚定时器函数
//由于是是适应于多个对象的变化,所以每个DIV有一个定时器
clearInterval(obj.timer);
//定时器函数
//每一个对象,有一个定时器
obj.timer = setInterval(function() {
//记录速度
var iSpeed = (iTarget - obj.offsetWidth) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
//运动和停止的判断条件
if (obj.offsetWidth == iTarget) {
//清楚定时器函数
clearInterval(obj.timer);
} else {
obj.style.width = obj.offsetWidth + iSpeed + 'px';
}
}, 30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
3.2 多个DIV淡入淡出的例子
<head>
<meta charset="UTF-8">
<title>多物体运动框架</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
margin-top: 50px;
filter: alpha(opacity: 30);
opacity: 0.3;
}
</style>
<script type="text/javascript">
window.onload = function() {
//获取元素
var aDiv = document.getElementsByTagName("div");
for (var i = 0; i < aDiv.length; i++) {
//将alpha作为,物体的一个属性
aDiv[i].alpha = 30;
aDiv[i].onmousemove = function() {
startMove(this, 100);
}
aDiv[i].onmouseout = function() {
startMove(this, 30);
}
}
}
//运动函数
function startMove(obj, iTarget) {
//清楚定时器函数
clearInterval(obj.timer);
//定时器函数
obj.timer = setInterval(function() {
//记录速度
var iSpeed = (iTarget - obj.alpha) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
//运动和停止的判断条件
if (obj.alpha == iTarget) {
//清楚定时器函数
clearInterval(obj.timer);
} else {
obj.alpha += iSpeed;
obj.style.filter = 'alpha(opacity:' + obj.alpha + ')';
obj.style.opacity = obj.alpha / 100;
}
}, 30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍Javascript 多物体运动的实现，包括了Javascript 多物体运动的实现的使用技巧和注意事项，需要的朋友参考一下 我们先来看下之前的运动的代码，是否支持多物体运动，会出现怎么样的问题。 以下是Javascript 代码： 此时当鼠标移入到第一个div 时，他是正常运行的。但是如果现在又移动到第二个或者第三个div时候就会出现bug。 image 这个是什么原因呢？ 看图可
-
本文向大家介绍javascript多物体运动实现方法分析，包括了javascript多物体运动实现方法分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript多物体运动实现方法。分享给大家供大家参考，具体如下： 这里需要注意：每个运动物体的定时器作为物体的属性独立出来互不影响，属性与运动对象绑定，不能公用。 运行效果截图如下： 例子： 更多关于JavaScript运动效果相
-
本文向大家介绍JS多物体实现缓冲运动效果示例，包括了JS多物体实现缓冲运动效果示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS多物体实现缓冲运动效果的方法。分享给大家供大家参考，具体如下： 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、
-
问题内容： 我正在尝试创建86个task.py实例以同时运行。 问题答案： 等待命令完成。改为使用：
-
当我映射同一个实体时，就像这里回答的那样： Hibernate与同一实体的多对多关联 在“tbl_friends”表中，我有相同含义的行。例如，我有id=1的用户和id=2的用户。在“tbl_friends”表中，当他们作为朋友链接时，我有两行 使用Hibernate或JPA引用是否可以在一行（1-2或2-1）中建立这种关系？
-
问题内容： 因此，我的目标是让函数启动自己的线程，以便可以并行运行，而不必等待上一个线程完成。问题在于，它似乎不是多线程的（意味着一个线程在另一个线程开始之前就完成了）。 我也有该函数的内部，但似乎启动的线程的标识与从其运行python脚本的主线程相同。我认为我的方法不正确。 问题答案： 这是常见错误，容易出错。 只需在主线程中一次执行您的函数，然后将（我想为您函数的返回值）作为函数传递给线程，这
-
本文向大家介绍js实现同一页面多个不同运动效果的方法，包括了js实现同一页面多个不同运动效果的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现同一页面多个不同运动效果的方法。分享给大家供大家参考。具体分析如下： 要点一： 从样式表中根据id和属性名取值。 要点二： 如果设置的是透明度的值，因为有可能会是小数点，所以需要用parseFloat，然后有可能会有小数，用round方法
-
问题内容： 如何运行多个python脚本？此刻我像这样跑一个。 我已经尝试过了，但是不起作用：仅运行第一个脚本。另外，我尝试使用这样的单个文件； 但是，这也不起作用。 问题答案： 使用Bash： 这就是整个脚本。它将同时运行两个Python脚本。 Python本身可以做同样的事情，但要花更多的时间输入，对于眼前的问题来说是一个不好的选择。 我认为尽管您采取错误的方法来解决问题很可能，但我想听听您的