動態(tài)的網(wǎng)頁技術(shù)（DHTM）已經(jīng)非常普及，本文強力向大家推薦一段完整并且是經(jīng)典的網(wǎng)頁多層代碼，適用于IE及NETSCAPE游覽器，可實現(xiàn)完善的二層網(wǎng)頁功能，具體代碼請見面文后程序。
該段代碼功能：打開該網(wǎng)頁文件之后，將在正常的網(wǎng)頁之上，浮動另外一層網(wǎng)頁內(nèi)容，可用鼠標隨意移動第二層網(wǎng)頁在第一層上的位置，并且當(dāng)屏幕滾動時，第二圖層可始終保持同第一圖層的相對位置，效果非常好。
適用場合：有了這段代碼，你可以對很多原有的網(wǎng)頁進行改造，使游覽者更為方便，比如可用于留言簿，第一層放置留言內(nèi)容，浮動的第二層放置留言表單，這樣游覽留言操作和觀察留言內(nèi)容可在同一頁面完成，并且無論屏幕滾動到什么位置，留言表單始終出現(xiàn)在屏幕之上，這無疑是最方便的留言系統(tǒng)工作方式。再比如可做為一般網(wǎng)頁的導(dǎo)航條，有很多人為了編制美觀的頁面而放棄使用分欄導(dǎo)航頁面方式，而使用整個頁面，這樣的頁面每進入到一個分欄目，都要重新調(diào)入整個頁面。有了這項技術(shù)，可以在原完整的頁面之上，浮動一層導(dǎo)航菜單，即方便了導(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)頁的制作過程，可能制作起來相當(dāng)費力，并且很多網(wǎng)頁制作工具不支持這一功能，用低級的網(wǎng)頁工具存盤后將失去浮動效果，所以對于這樣的網(wǎng)頁最好的維護方法是分頁維護，即分別編制兩個完整的網(wǎng)頁內(nèi)容，之后按要求合并在一個網(wǎng)頁文件內(nèi)即可。這樣向你介紹一種最可取的方法，眾所周知，現(xiàn)在的網(wǎng)頁技術(shù)可以實現(xiàn)在一個網(wǎng)頁內(nèi)調(diào)用其它網(wǎng)頁的功能，即所謂的畫中畫功能，所以完全可以把代碼二和代碼三換成固定的調(diào)用其它網(wǎng)頁的固定代碼，之后只需要對這兩個單獨的頁維護就可以了。具體可用下面的代碼替換代碼二和三：
ILAYER 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="0" scrolling="no">
</IFRAME> 其中SRC:用于指定打開的網(wǎng)頁地址;
width:該表格占用的寬度;
height:該表格點用的高度;
marginwidth:網(wǎng)頁內(nèi)容在表格右側(cè)的預(yù)留寬度;
marginheight:網(wǎng)頁內(nèi)容在表格頂部預(yù)留的高度;
hspace:網(wǎng)頁右上角的橫坐標;
vspace:網(wǎng)頁右上角的縱坐標;
frameborder:是否顯示邊緣;
scrolling:是否出現(xiàn)滾動條;
具體使用時把h1.htm分別換成不同的網(wǎng)頁文件名。
完成的網(wǎng)頁文件代碼如下：
<html>
<head>
<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>
//代碼段一結(jié)束
<title>浮動層</title>
</head>
//代碼段二（第一層內(nèi)容，目前為空）
<body bgcolor="#FFFFFF">
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
//代碼段二結(jié)束
//代碼段三（浮動層內(nèi)容，目前為一簡單表格）
<div ID="floater" style="left: 0px; 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></td>
<td>2222222</td>
</tr>
</table>
</div>
//代碼段三結(jié)束
//代碼段四
<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;
<!-- STALKER CODE -->
function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
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);
if(IE) document.all.floater.style.pixelTop += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent; }
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelLeft += percent;
if(NS) document.floater.left += percent;
lastScrollX = lastScrollX + percent;}}
<!-- /STALKER CODE -->
<!-- DRAG DROP CODE -->
function checkFocus(x,y) {
stalkerx = document.floater.pageX;
stalkery = document.floater.pageY;
stalkerwidth = document.floater.clip.width;
stalkerheight = document.floater.clip.height;
if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
else return false; }
function grabIt(e) {
if(IE) {whichIt = event.srcElement;
while (whichIt.id.indexOf("floater") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; } }
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop); } else {
window.captureEvents(Event.MOUSEMOVE);
if(checkFocus (e.pageX,e.pageY)) {
whichIt = document.floater;
StalkerTouchedX = e.pageX-document.floater.pageX;
StalkerTouchedY = e.pageY-document.floater.pageY; } }
return true;}
function moveIt(e) {
if (whichIt == null) { return false; }
if(IE) {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX); distanceY = (newY - currentY);
currentX = newX; currentY = newY;
whichIt.style.pixelLeft += distanceX;
whichIt.style.pixelTop += distanceY;
if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
event.returnValue = false;
} else {
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+ self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+ self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
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 = dropIt; }
if(IE) {
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt; }
if(NS || IE) action = window.setInterval("heartBeat()",1);
</script>
//代碼段四結(jié)束
</body>
</html>
桂公網(wǎng)安備45010502000253號
電子營業(yè)執(zhí)照
