網(wǎng)頁中多層效果的靈活使用

1、網(wǎng)頁中多層效果的靈活使用CODE動態(tài)的網(wǎng)頁技術(shù)（DHTM）已經(jīng)非常普及，本文強(qiáng)力向大家推薦一段完整并且是經(jīng)典的網(wǎng)頁多層代碼，適用于IE及SCAPE游覽器，可實(shí)現(xiàn)完善的二層網(wǎng)頁功能，具體代碼請見面文后程序。該段代碼功能：打開該網(wǎng)頁文件之后，將在正常的網(wǎng)頁之上，浮動另外一層網(wǎng)頁內(nèi)容，可用鼠標(biāo)隨意移動第二層網(wǎng)頁在第一層上的位置，并且當(dāng)屏幕滾動時，第二圖層可始終保持同第一圖層的相對位置，效果非常好。適用場合：有了這段代碼，你可以對很多原有的網(wǎng)頁

2、進(jìn)行改造，使游覽者更為方便，比如可用于留言簿，第一層放置留言內(nèi)容，浮動的第二層放置留言表單，這樣游覽留言操作和觀察留言內(nèi)容可在同一頁面完成，并且無論屏幕滾動到什么位置，留言表單始終出現(xiàn)在屏幕之上，這無疑是最方便的留言系統(tǒng)工作方式。再比如可做為一般網(wǎng)頁的導(dǎo)航條，有很多人為了編制美觀的頁面而放棄使用分欄導(dǎo)航頁面方式，而使用整個頁面，這樣的頁面每進(jìn)入到一個分欄目，都要重新調(diào)入整個頁面。有了這項(xiàng)技術(shù)，可以在原完整的頁面之上，浮動一層導(dǎo)航菜單，即

3、方便了導(dǎo)航又保持了頁面的完整。另外也可以在某些頁面之上浮動一個特定的圖像或其它頁面內(nèi)容，等等，總之，這種技術(shù)應(yīng)用非常廣泛。代碼說明：代碼段一可放置在網(wǎng)頁的文件頭處，即段。代碼段二為正常的網(wǎng)頁內(nèi)容，即第一層的代碼內(nèi)容。第三段為第二層網(wǎng)頁的代碼段，即浮動的網(wǎng)頁內(nèi)容。代碼段四為必要的控制代碼，可放置在網(wǎng)頁的最后處。靈活使用：下面的代碼是完整的網(wǎng)頁文件代碼，把代碼段二和代碼段三換成你自己所需要的內(nèi)容就可以了，但由于本網(wǎng)頁文件涉及兩個網(wǎng)頁的制作過

4、程，可能制作起來相當(dāng)費(fèi)力，并且很多網(wǎng)頁制作工具不支持這一功能，用低級的網(wǎng)頁工具存盤后將失去浮動效果，所以對于這樣的網(wǎng)頁最好的維護(hù)方法是分頁維護(hù)，即分別編制兩個完整的網(wǎng)頁內(nèi)容，之后按要求合并在一個網(wǎng)頁文件內(nèi)即可。這樣向你介紹一種最可取的方法，眾所周知，現(xiàn)在的網(wǎng)頁技術(shù)可以實(shí)現(xiàn)在一個網(wǎng)頁內(nèi)調(diào)用其它網(wǎng)頁的功能，即所謂的畫中畫功能，所以完全可以把代碼二和代碼三換成固定的調(diào)用其它網(wǎng)頁的固定代碼，之后只需要對這兩個單獨(dú)的頁維護(hù)就可以了。具體可用下面的

5、代碼替換代碼二和三：ILAYERid=“ad1“visibility=“hidden“height=“60“其中SRC:用于指定打開的網(wǎng)頁地址width:該表格占用的寬度height:該表格點(diǎn)用的高度marginwidth:網(wǎng)頁內(nèi)容在表格右側(cè)的預(yù)留寬度marginheight:網(wǎng)頁內(nèi)容在表格頂部預(yù)留的高度hspace:網(wǎng)頁右上角的橫坐標(biāo)vspace:網(wǎng)頁右上角的縱坐標(biāo)framebder:是否顯示邊緣scrolling:是否出現(xiàn)滾動條if

6、(percent0)percent=Math.ceil(percent)elsepercent=Math.flo(percent)if(IE)document.all.floater.style.pixelTop=percentif(NS)document.floater.top=percentlastScrollY=lastScrollYpercentif(diffX!=lastScrollX)percent=.1(diffXlast

7、ScrollX)if(percent0)percent=Math.ceil(percent)elsepercent=Math.flo(percent)if(IE)document.all.floater.style.pixelLeft=percentif(NS)document.floater.left=percentlastScrollX=lastScrollXpercentfunctioncheckFocus(xy)stalkerx

8、=document.floater.pageXstalkery=document.floater.pageYstalkerwidth=document.floater.clip.widthstalkerheight=document.floater.clip.heightif((xstalkerxelsereturnfalsefunctiongrabIt(e)if(IE)whichIt=event.srcElementwhile(whi

9、chIt.id.indexOf(“floater“)==1)whichIt=whichIt.parentElementif(whichIt==null)returntruewhichIt.style.pixelLeft=whichIt.offsetLeftwhichIt.style.pixelTop=whichIt.offsetTopcurrentX=(event.clientXdocument.body.scrollLeft)curr

10、entY=(event.clientYdocument.body.scrollTop)elsewindow.captureEvents(Event.MOUSEMOVE)if(checkFocus(e.pageXe.pageY))whichIt=document.floaterStalkerTouchedX=e.pageXdocument.floater.pageXStalkerTouchedY=e.pageYdocument.float

11、er.pageYreturntruefunctionmoveIt(e)if(whichIt==null)returnfalseif(IE)newX=(event.clientXdocument.body.scrollLeft)newY=(event.clientYdocument.body.scrollTop)distanceX=(newXcurrentX)distanceY=(newYcurrentY)currentX=newXcur