javascript實(shí)現(xiàn)動(dòng)態(tài)改變層大小的方法
本文實(shí)例講述了javascript實(shí)現(xiàn)動(dòng)態(tài)改變層大小的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>動(dòng)態(tài)設(shè)置層的大小</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不能設(shè)置class,否則使用divMain.style.width取到的值時(shí)空的 //只能在元素里設(shè)置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) { //清除定時(shí)器 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="動(dòng)態(tài)放大層" onclick="ShowDiv()" /> <div id="divMain" class="divMain"> 案例:跟著鼠標(biāo)飛的圖片。提示:鼠標(biāo)移動(dòng)的事件時(shí)onmousemove,通過 window.event的clientX,clientY屬性獲得鼠標(biāo)的位置 </div> <!--這里不能設(shè)置class,否則使用divMain.style.width取到的值時(shí)空的--> <div id="divMain2" style="width:10px;height:100px;background-color:Red;"> 案例:跟著鼠標(biāo)飛的圖片。提示:鼠標(biāo)移動(dòng)的事件時(shí)onmousemove,通過 window.event的clientX,clientY屬性獲得鼠標(biāo)的位置 </div> </body> </html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- JavaScript實(shí)現(xiàn)DIV層拖動(dòng)及動(dòng)態(tài)增加新層的方法
- Javascript動(dòng)態(tài)創(chuàng)建div的方法
- JavaScript動(dòng)態(tài)創(chuàng)建div屬性和樣式示例代碼
- JavaScript動(dòng)態(tài)改變表格單元格內(nèi)容的方法
- JavaScript動(dòng)態(tài)改變HTML頁面元素例如添加或刪除
- JavaScript修改css樣式style動(dòng)態(tài)改變?cè)貥邮?/a>
- JavaScript動(dòng)態(tài)改變div屬性的實(shí)現(xiàn)方法
相關(guān)文章
js文本框輸入點(diǎn)回車觸發(fā)確定兼容IE、FF等
js文本框輸入點(diǎn)回車觸發(fā)確定兼容IE、FF等,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2013-11-11js鼠標(biāo)點(diǎn)擊按鈕切換圖片-圖片自動(dòng)切換-點(diǎn)擊左右按鈕切換特效代碼
今天主要給大家分享一段js和css代碼組合實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊按鈕圖片切換,圖片自動(dòng)切換,點(diǎn)擊左右按鈕圖片切換三種效果,代碼非常簡單,需要的朋友一起來學(xué)習(xí)吧2015-09-09原生js實(shí)現(xiàn)的移動(dòng)端可拖動(dòng)進(jìn)度條插件功能詳解
這篇文章主要介紹了原生js實(shí)現(xiàn)的移動(dòng)端可拖動(dòng)進(jìn)度條插件功能,結(jié)合實(shí)例形式詳細(xì)分析了javascript拖動(dòng)進(jìn)度條插件的具體定義與使用技巧,需要的朋友可以參考下2019-08-08淺談javascript中的Function和Arguments
下面小編就為大家?guī)硪黄獪\談javascript中的Function和Arguments。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08多個(gè)上傳文件用js驗(yàn)證文件的格式和大小的方法(推薦)
下面小編就為大家?guī)硪黄鄠€(gè)上傳文件用js驗(yàn)證文件的格式和大小的方法(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03非常不錯(cuò)的功能強(qiáng)大代碼簡單的管理菜單美化版
由于網(wǎng)盤不穩(wěn)定,很多時(shí)候文件提示找不到,幸好U盤里存了. 喜歡這3個(gè)風(fēng)格的朋友們別在PM我啦.....我把文件傳到我服務(wù)器上了..2008-07-07javascript實(shí)現(xiàn)瀑布流自適應(yīng)遇到的問題及解決方案
這篇文章主要介紹了javascript實(shí)現(xiàn)瀑布流自適應(yīng)遇到的問題及解決方案,需要的朋友可以參考下2015-01-01