javascript 动态改变层的大小

来源：互联网发布：恋母情结知乎编辑：程序博客网时间：2024/06/03 20:11

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>动态设置层的大小</title>
    <style type="text/css">
        .divMain
        {
            width:10px;
            height:100px;
            border-style:solid;
            border-width:1px;
            border-color:Green;
            display:none;
        }
    </style>
    <script type="text/javascript">
        var setIntervalID;
        function ZoomDiv() {
            var divMain = document.getElementById("divMain");
            divMain.style.width = "200px";
            divMain.style.height = "200px";
        }
        function ShowDiv() {
            setIntervalID = setInterval("inc()", 100);
        }
        function inc() {
            var divMain = document.getElementById("divMain2");
            //div不能设置class,否则使用divMain.style.width取到的值时空的
            //只能在元素里设置style="width:10px;height:100px"
            var oldWidth = divMain.style.width;
            var oldHeight = divMain.style.height;
            oldWidth = parseInt(oldWidth);
            oldHeight = parseInt(oldHeight);
            oldWidth += 1;
            oldHeight += 1;
            if (oldWidth >= 200) {
                //清除定时器
                clearInterval(setIntervalID);
                return;
            }
            divMain.style.width = oldWidth + "px";
            divMain.style.height = oldHeight + "px";
        }
    </script>
</head>
<body>
    <input type="button" value="放大层" onclick="ZoomDiv()" />
    <input type="button" value="动态放大层" onclick="ShowDiv()" />
    <div id="divMain" class="divMain">
    案例:跟着鼠标飞的图片。提示:鼠标移动的事件时onmousemove,通过
window.event的clientX,clientY属性获得鼠标的位置
    </div>
    
    <div id="divMain2" style="width:10px;height:100px;background-color:Red;">
    案例:跟着鼠标飞的图片。提示:鼠标移动的事件时onmousemove,通过
window.event的clientX,clientY属性获得鼠标的位置
    </div>
</body>
</html>