JS实现多物体运动的方法详解
本文实例分析了JS实现多物体运动的方法。分享给大家供大家参考，具体如下：
基本步骤
1.通过getElementsByTagName获取到要做多物体运动的元素
2.然后for循环遍历元素，添加事件
3.定义startMove函数，需要两个参数，当前“做运动”的元素，和目标值target
注意问题：在多物体运动中，所有的东西不能公用；
<script>
window.onload = function(){
var liTags = document.getElementsByTagName('li'); // 第一步
for(var i=0;i<liTags.length;i++){ // 第二步
liTags[i].onmouseover = function () {
startMove(this,400);
}
liTags[i].onmouseout = function () {
startMove(this,200);
}
}
}
var timer = null;
function startMove(obj,iTarget) { // 第三步，2个参数
clearInterval(timer);
timer = setInterval(function () {
var iSpeed = (iTarget - obj.offsetWidth)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 缓冲运动注意取整处理
if(obj.offsetWidth == iTarget){
clearInterval(timer);
}else{
obj.style.width = obj.offsetWidth+iSpeed+'px';
}
},30);
}
</script>
问题：
当移入移出速度比较快的时候，就会出现有的li回不到原来的样子，卡在半路了；这是因为所有的li公用了一个定时器造成的；
当鼠标移入第一个li时，调用startMove开启一个定时器；鼠标移除li时，也需要开启一个定时器让li回到原来的位置，li走到半路上，我们移入第二个li，首先会清除定时器，这时候第一个li就卡到半路了。
解决这个问题：让每个li拥有自己的timer去控制他们的变化，在for循环的时候，给每个里定义自己的一个timer
liTags[i].timer = null;// 给每个li都添加一个timer
接着在starMove里面每次用的定时器都是当前li 自己的，就不会互相干扰了。
这里由之前的timer变成了obj.timer (当前对象自己的timer)；到这里就没问题了。
完整代码如下：
<body> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </body>
加点样式：
<style>
ul{list-style: none;}
ul li{
margin: 10px;
width: 200px;height: 50px;
background: lightblue;
}
</style>
完整js代码
<script>
window.onload = function(){
var liTags = document.getElementsByTagName('li');
for(var i=0;i<liTags.length;i++){
liTags[i].timer = null;// 给每个li都添加一个timer
liTags[i].onmouseover = function () {
startMove(this,400);
}
liTags[i].onmouseout = function () {
startMove(this,200);
}
}
}
function startMove(obj,iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var iSpeed = (iTarget - obj.offsetWidth)/10;
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>
接着在看一个例子：多物体运动-改变透明度
<script>
window.onload = function () {
var aImgs = document.getElementsByTagName('img');
for(var i=0;i<aImgs.length;i++){
aImgs[i].timer = null;
aImgs[i].alpha = 100; // 把公用的alpha改成每个img对象都有的属性
aImgs[i].onmouseover = function () {
startMove(this,30);
}
aImgs[i].onmouseout = function () {
startMove(this,100);
}
}
}
// var alpha = 100; 这里alpha在多物体运动里 不能公用
function startMove(obj,iTarget) {
clearInterval(obj.timer);
var iSpeed = (iTarget - obj.alpha)/10;
iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed);
obj.timer = setInterval(function(){
if(obj.alpha == iTarget){
clearInterval(obj.timer);
}else{
obj.alpha += iSpeed;
obj.style.opacity =obj.alpha/100;
obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
}
},30);
}
</script>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
本文介绍了“node在两个div之间移动,用ztree实现”的方法，需要的朋友可以参考一下2013-03-03
这篇文章主要介绍了js 图片懒加载的实现，帮助大家更好的优化自身网页，提高网页响应速度，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了对于防止按钮重复点击的尝试，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
前端需要做到无感刷新token,即刷token时要做到用户无感知,避免频繁登录,下面这篇文章主要给大家介绍了关于前端无感知刷新token以及超时自动退出的实现方案,需要的朋友可以参考下2024-01-01
JavaScript字符串String和Array操作的有趣方法
字符串和数组在程序编写过程中是十分常用的类型,因此程序语言都会将String和Array作为基本类型，并提供许多字符串和数组的方法来简化对字符串的操作2012-12-12
这篇文章主要给大家介绍了关于如何使用JavaScript解析URL的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
这篇文章主要介绍了javascript 中关于array的常用方法的相关资料,需要的朋友可以参考下2017-05-05
在javascript中，replace方法是属于String对象的，可用于替换字符串。今天我们就来详细探讨下一些replace()方法的使用2015-09-09
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
大家在开发JavaScript应用的时候，如果遇到这种大量节点的情况，不妨将DocumentFragment作为一个备选的方案。2010-06-06
这篇文章主要为大家详细介绍了JavaScript分页组件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
最新评论