首页 > 代码库 > 多物体运动

多物体运动

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

多物体运动