html如何動態(tài)改變框架的大小。

如何動態(tài)改變框架的大小

解決思路：

在框架所加載頁中用parent.frames["框架名"].cols=”值1,值2…” 或者parent.frames["框架名"].rows=”值1,值2…”來動態(tài)設(shè)置框架大小。

具體步驟：

1．直接隱藏或顯示。

(1).框架頁代碼。

或者

(2).demo.htm頁的代碼。

隱藏左框架

顯示左框架

或者

隱藏上框架

顯示上框架

2.勻速改變框架尺寸。

(1)框架頁代碼。

(2)demo.htm頁代碼。

//step為框架尺寸改變的速度步長

//flag為判斷當(dāng)前狀態(tài)是顯示(1)還是隱藏(-1)

var obj,w,step=3,flag=-1

function showHideFrame(b){

obj=parent.frames[’frame1’] //目標(biāo)框架對象

w=parseInt(obj.cols.split(“,”)[0])

/*目標(biāo)框架對象的當(dāng)前寬度，本例中obj.cols取得的值為”100,*”(顯示狀態(tài)時為”0,*”)，obj.cols.split(“,”)把obj.cols以”,”為標(biāo)志分組，得到數(shù)組["100","*"]，obj.cols.split(“,”)[0]取到數(shù)組的第一個元素100，然后用parseInt(obj.cols.split(“,”)[0])轉(zhuǎn)化為整數(shù)*/

flag=b //根據(jù)參數(shù)值b，設(shè)置顯示隱藏狀態(tài)

resize() //調(diào)用resize()函數(shù)

}

function resize(){

//調(diào)整目標(biāo)框架對象寬度值，如果flag為1即顯示框架時w不斷變大，

//反之不斷變小

w+=step*flag

if((flag==-1&&w>0)||(flag==1&&w<100)){

//隱藏狀態(tài)并且w大于0或者顯示狀態(tài)并且w<100，執(zhí)行下面的代碼

obj.cols=w+”,*” //重設(shè)框架寬度

setTimeout(“resize()”,10) //10毫秒后再次執(zhí)行resize()函數(shù)

}

}

隱藏左框架

顯示左框架

代碼運行效果：

圖1.6.1 第3步的代碼運行效果

圖1.6.2 單擊【隱藏左框架】時的效果(左框架正在縮小)

3.對于內(nèi)嵌浮動框架iframe，它的屬性必須使用前綴 document.all ，或者以document.getElementsByName(“框架名”)和document.getElementById(“框架名”)這三種方式訪問。

(1)捕獲iframe對象的三種方法演示。

show

show

show

hide

hide

hide

代碼運行效果：

圖1.6.3捕獲iframe對象的三種方法演示

(2)或者把它放到一個元素中，然后控制該元素的顯示或隱藏。

hide

show

(3)通過設(shè)置CSS屬性clip，實現(xiàn)的勻速顯示與隱藏效果。

var step=0

function resize(flag){

step+=5*flag

document.all.demo.style.clip=”rect(0 “+step+”% “+step+”% 0)”

if(flag==1)

if(step<100) setTimeout(“resize(1)”,10)

if(flag==-1)

if(step>0) setTimeout(“resize(-1)”,10)

}

show

hide

代碼運行效果：

圖1.6.4 iframe的勻速顯示與隱藏演示

圖1.6.5 單擊【hide】按鈕時的效果

注意：使用腳本控制iframe的clip屬性前必須要設(shè)置iframe的position屬性為absolute。

試一試：讀者可以試著用iframe的width和height屬性控制它的隱藏與顯示。

特別提示

1.第3步的代碼運行效果如圖1.6.1所示，圖1.6.2為單擊【隱藏左框架】時的效果(左框架正在縮小)。

2.三種捕獲iframe對象的方法演示效果見圖1.6.3。

3.圖1.6.4為第4步中(3)的代碼運行效果，單擊圖1.6.4中的 【hide】 按鈕后iframe逐漸被全部剪切，效果如圖1.6.5所示。

特別說明

本例所涉及的知識點比較多，歸納起來主要是frameset的cols和rows屬性獲取、iframe對象的捕獲和clip屬性的應(yīng)用。

document.all 返回對象所包含的元素集合的引用。

document.frames(parent.frames,top.frames) 獲取給定文檔定義或與給定窗口關(guān)聯(lián)的文檔定義的所有 window 對象的集合。

document.getElementById 獲取對 ID 標(biāo)簽屬性為指定值的第一個對象的引用。

document.getElementsByName 根據(jù) NAME 標(biāo)簽屬性的值獲取對象的集合。

總結(jié)

以上是生活随笔為你收集整理的html整体框架的大小,html如何动态改变框架的大小的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。