<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多物体运动</title>
<style type="text/css">
div {
width: 100px;
height: 50px;
margin: 20px 0 0 0;
background: green;
}
</style>
<script type="text/javascript">
window.onload = function() {
var aDiv = document.getElementsByTagName("div");
for (var i = 0; i < aDiv.length; i++) {
aDiv[i].timer = null;
//每个对象定义一个自己的定时器
aDiv[i].onmouseover = function() {
move(this, "width", 1000);
};
aDiv[i].onmouseout = function() {
move(this, "width", 100);
};
};
};
function getStyle(obj, attr) {//获取属性值
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return window.getComputedStyle(obj,false)[attr];
//return window.getComputedStyle(obj,false).getPropertyValue(attr);
}
};
function move(obj, attr, iTarget) {
clearInterval(obj.timer);
//关闭定时器
obj.timer = setInterval(function() {
var iSpeed = (iTarget - parseInt(getStyle(obj, attr))) / 19;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (parseInt(getStyle(obj, attr) == iTarget)) {
clearInterval(obj.timer);
} else {
obj.style[attr] = parseInt(getStyle(obj, attr)) + iSpeed + "px";
};
}, 30);
}
</script>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>
时间： 2024-08-09 06:34:42