網頁中多層效果的靈活使用_第1頁
網頁中多層效果的靈活使用_第2頁
網頁中多層效果的靈活使用_第3頁
網頁中多層效果的靈活使用_第4頁
全文預覽已結束

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、網頁中多層效果的靈活使用CODE動態的網頁技術（DHTM）已經非常普及，本文強力向大家推薦一段完整并且是經典的網頁多層代碼，適用于IE及NETSCAPE游覽器，可實現完善的二層網頁功能，具體代碼請見面文后程序。 該段代碼功能：打開該網頁文件之后，將在正常的網頁之上，浮動另外一層網頁內容，可用鼠標隨意移動第二層網頁在第一層上的位置，并且當屏幕滾動時，第二圖層可始終保持同第一圖層的相對位置，效果非常好。 適用場合：有了這段代碼，你可以對很多原有的網頁進行改造，使游覽者更為方便，比如可用于留言簿，第一層放置留言內容，浮動的第二層放置留言表單，這樣游覽留言操作和觀察留言內容可在同一頁面完成，并且無論屏

2、幕滾動到什么位置，留言表單始終出現在屏幕之上，這無疑是最方便的留言系統工作方式。再比如可做為一般網頁的導航條，有很多人為了編制美觀的頁面而放棄使用分欄導航頁面方式，而使用整個頁面，這樣的頁面每進入到一個分欄目，都要重新調入整個頁面。有了這項技術，可以在原完整的頁面之上，浮動一層導航菜單，即方便了導航又保持了頁面的完整。另外也可以在某些頁面之上浮動一個特定的圖像或其它頁面內容，等等，總之，這種技術應用非常廣泛。 代碼說明：代碼段一可放置在網頁的文件頭處，即段。代碼段二為正常的網頁內容，即第一層的代碼內容。第三段為第二層網頁的代碼段，即浮動的網頁內容。代碼段四為必要的控制代碼，可放置在網頁的最后處

3、。靈活使用：下面的代碼是完整的網頁文件代碼，把代碼段二和代碼段三換成你自己所需要的內容就可以了，但由于本網頁文件涉及兩個網頁的制作過程，可能制作起來相當費力，并且很多網頁制作工具不支持這一功能，用低級的網頁工具存盤后將失去浮動效果，所以對于這樣的網頁最好的維護方法是分頁維護，即分別編制兩個完整的網頁內容，之后按要求合并在一個網頁文件內即可。這樣向你介紹一種最可取的方法，眾所周知，現在的網頁技術可以實現在一個網頁內調用其它網頁的功能，即所謂的畫中畫功能，所以完全可以把代碼二和代碼三換成固定的調用其它網頁的固定代碼，之后只需要對這兩個單獨的頁維護就可以了。具體可用下面的代碼替換代碼二和三： ILA

4、YER id="ad1" visibility="hidden" height="60"> </ILAYER> <NOLAYER> <IFRAME SRC="h1.htm" width="100%" height="60" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder=&qu

5、ot;0" scrolling="no"> </IFRAME> 其中SRC:用于指定打開的網頁地址; width:該表格占用的寬度; height:該表格點用的高度; marginwidth:網頁內容在表格右側的預留寬度; marginheight:網頁內容在表格頂部預留的高度; hspace:網頁右上角的橫坐標; vspace:網頁右上角的縱坐標; frameborder:是否顯示邊緣; scrolling:是否出現滾動條; 具體使用時把h1.htm分別換成不同的網頁文件名。 完成的網頁文件代碼如下： <html> <head

6、> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> /代碼段一 <style type="text/css"><!- #floater position: absolute;left: 500;top: 146;width: 125;visibility: visible;z-index: 10; -> </style> /代碼段一結束 <title>浮動層</title&g

7、t; </head> /代碼段二（第一層內容，目前為空） <body bgcolor="#FFFFFF"> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> /代碼段二結束 /代碼段三（浮動層內容，目前為一簡單表格） <div ID="floater" style="left: 0px;

8、 top: 1px"> <table border="1" cellpadding="0" cellspacing="0" bgcolor="#25A78D" bordercolordark="#00FFFF" bordercolorlight="#000000"> <tr> <td>111<a href="file:/G:/C/NEW/dhtml2.htm">1111</a>&l

9、t;/td> <td>2222222</td> </tr> </table> </div> /代碼段三結束 /代碼段四 <script LANGUAGE="JavaScript"> self.onError=null; currentX = currentY = 0; whichIt = null; lastScrollX = 0; lastScrollY = 0; NS = (document.layers) ? 1 : 0; IE = (document.all) ? 1: 0; <!-

10、 STALKER CODE -> function heartBeat() if(NS) diffY = self.pageYOffset; diffX = self.pageXOffset; if(diffY != lastScrollY) percent = .1 * (diffY - lastScrollY); if(percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); lastScrollY = lastScrollY + percent; if(diffX != las

11、tScrollX) percent = .1 * (diffX - lastScrollX); if(percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); lastScrollX = lastScrollX + percent; <!- /STALKER CODE -> <!- DRAG DROP CODE -> function checkFocus(x,y) if( (x > stalkerx && x < (stalkerx+s

12、talkerwidth) && (y > stalkery && y < (stalkery+stalkerheight) return true; else return false; function grabIt(e) if(IE) whichIt = event.srcElement; whichIt = whichIt.parentElement; if (whichIt = null) return true; window.captureEvents(Event.MOUSEMOVE); if(checkFocus (e.pageX,e.

13、pageY) whichIt = document.floater; return true; function moveIt(e) if (whichIt = null) return false; if(IE) distanceX = (newX - currentX); distanceY = (newY - currentY); currentX = newX; currentY = newY; event.returnValue = false; else whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);

14、 if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset; if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset; return false; return false; function dropIt() whichIt = null; if(NS) window.releaseEvents (Event.MOUSEMOVE); return true; <!- DRAG DROP CODE -> if(NS) window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN); window.onmousedown = grabIt; window.onmousemove = moveIt; window.onmouseup

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論