多物体运动

最新推荐文章于 2017-01-19 10:26:50 发布

zhanyan_x

最新推荐文章于 2017-01-19 10:26:50 发布

阅读量768

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/zhanyan_x/article/details/41242465

版权

javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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

zhanyan_x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多物体运动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 多物体运动 div { width: 100px; height: 50px; margin: 20
复制链接

扫一扫

专栏目录