javascript实现动态改变层大小的方法
本文实例讲述了javascript实现动态改变层大小的方法。分享给大家供大家参考。具体实现方法如下：
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>动态设置层的大小</title>
<styletype="text/css">
.divMain
{
width:10px;
height:100px;
border-style:solid;
border-width:1px;
border-color:Green;
display:none;
}
</style>
<scripttype="text/javascript">
varsetIntervalID;
functionZoomDiv(){
vardivMain=document.getElementById("divMain");
divMain.style.width="200px";
divMain.style.height="200px";
}
functionShowDiv(){
setIntervalID=setInterval("inc()",100);
}
functioninc(){
vardivMain=document.getElementById("divMain2");
//div不能设置class,否则使用divMain.style.width取到的值时空的
//只能在元素里设置style="width:10px;height:100px"
varoldWidth=divMain.style.width;
varoldHeight=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>
<inputtype="button"value="放大层"onclick="ZoomDiv()"/>
<inputtype="button"value="动态放大层"onclick="ShowDiv()"/>
<divid="divMain"class="divMain">
案例:跟着鼠标飞的图片。提示:鼠标移动的事件时onmousemove,通过
window.event的clientX,clientY属性获得鼠标的位置
</div>
<!--这里不能设置class,否则使用divMain.style.width取到的值时空的-->
<divid="divMain2"style="width:10px;height:100px;background-color:Red;">
案例:跟着鼠标飞的图片。提示:鼠标移动的事件时onmousemove,通过
window.event的clientX,clientY属性获得鼠标的位置
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。