萬盛學電腦網 >> 腳本專題 >> javascript >> javascript實現動態改變層大小的方法
javascript實現動態改變層大小的方法
本文實例講述了javascript實現動態改變層大小的方法。分享給大家供大家參考。具體實現方法如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 <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程序設計有所幫助。
javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved