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

更新时间：2026-03-29 01:17:32作者：fang

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

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

运行效果截图如下：

例子：

<!doctype html>

<html>

<head>

<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>

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>

</body>

</html>

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