教程集 > 脚本编程 > javascript > 正文 javascript 动态改变层大小实例

javascript 动态改变层大小实例

发布时间：2015-07-14 编辑：jiaochengji.com

本文介绍了javascript 动态改变层大小的方法，js脚本动态改变层大小的例子，有需要的朋友参考学习下。

例子，使用js代码动态改变层的大小。

复制代码代码示例:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>动态设置层的大小_www.jiaochengji.com</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>

    <!--这里不能设置class,否则使用divMain.style.width取到的值时空的-->

    <div id="divMain2" style="width:10px;height:100px;background-color:Red;">

    案例:跟着鼠标飞的图片。提示:鼠标移动的事件时onmousemove,通过

window.event的clientX,clientY属性获得鼠标的位置

    </div>

</body>

</html>

您可能感兴趣的文章：
javascript 动态改变层大小实例
 jQuery 打造动态渐变按钮详细图文教程
 photoshop基础图层与蒙版使用技巧心得
 js动态显示与隐藏层的简单例子
 CSS3制作动画效果例子
 深入解析JavaScript操纵窗口的方法
 自动改变文字大小和颜色的js代码分享
 【精品推荐】web开发人员应该知道的31个jQuery模态对话框
 JavaScript内部原理系列－闭包（Closures）
从零开始学习jQuery (七) jQuery动画实现让页面动起来

关键词： div div标签 　

上一篇：javascript 动态设置style样式实例教程下一篇：Javascript数组连接 concat方法

[关闭]

javascript 动态改变层大小实例

最近更新

浏览排行