javascript多物体运动实现方法分析

时间：2021-05-26

本文实例讲述了javascript多物体运动实现方法。分享给大家供大家参考，具体如下：

这里需要注意：每个运动物体的定时器作为物体的属性独立出来互不影响，属性与运动对象绑定，不能公用。

运行效果截图如下：

例子：

<!doctype html><html><head><meta charset="utf-8"><title>多物体运动</title><style>div{ width:100px; height:100px; background:red; float:left; margin:10px; border:1px solid black; opacity:0.3; filter:alpha(opacity=30);}</style><script>window.onload = function(){ var aDiv = document.getElementsByTagName('div'); aDiv[0].onmouseover = function() { startMove(this, 'width', 300); }; aDiv[0].onmouseout = function() { startMove(this, 'width', 100); }; aDiv[1].onmouseover = function() { startMove(this, 'height', 300); }; aDiv[1].onmouseout = function() { startMove(this, 'height', 100); }; aDiv[2].onmouseover = function() { startMove(this, 'opacity', 100); }; aDiv[2].onmouseout = function() { startMove(this, 'opacity', 30); }; aDiv[3].onmouseover = function() { startMove(this, 'borderWidth', 20); }; aDiv[3].onmouseout = function() { startMove(this, 'borderWidth', 1); };};function getStyle(obj, attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj, false)[attr]; }}function startMove(obj, attr, iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var iCur = 0; if(attr == 'opacity'){ iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100); }else{ iCur = parseInt(getStyle(obj, attr)); } var iSpeed = (iTarget - iCur) / 8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(iCur == iTarget){ clearInterval(obj.timer); }else{ if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity='+ (iCur+iSpeed) +')'; obj.style.opacity = (iCur+iSpeed)/100; }else{ obj.style[attr] = iCur + iSpeed + 'px'; } } }, 30);}</script></head><body><div></div><div></div><div></div><div></div></body></html>

更多关于JavaScript运动效果相关内容可查看本站专题：《JavaScript运动效果与技巧汇总》

希望本文所述对大家JavaScript程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章