本文實例講述了javascript實現動態改變層大小的方法。分享給大家供大家參考。具體實現方法如下：
<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">.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程序設計有所幫助。
新聞熱點
疑難解答
