相关文章
网站地图的制作和提交
电子杂志DIY流行时尚
从零开始带你做Google Adsense!(二)
网站制作DHTML编写经得起考验的可移植代码
网站建设4天学会 NoahWeb 表单 - 第四天
网站制作Dreamweaver快捷键大全
北京网页设计DREAMWEAVER 技巧（上）
企通互联Flash 8.0前瞻——揭开8 ball的薄面纱
企通互联在DreamweaverCS3中用Spry将XML数据显示到HTML页
北京网站制作DW MX 2004新功能:加密FTP
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> www.qitongnet.com北京网站设计网页中多层效果的灵活使用
www.qitongnet.com北京网站设计网页中多层效果的灵活使用
作者： 北京网站建设 日期：2008-03-27 06:03:35 来源： http://www.qitongnet.com
资深北京网站建设公司企通互联,专业致力于北京网站建设,北京网站制作,北京网站设计,北京网页设计领域,千余网站建设案例，公司拥有国内一流的网站建设、网站制作、网页设计团队，如果您已经有网站的,看看我们精美的网站建设案例也无妨.北京网站建设网址：http://www.qitongnet.com
=======================================================================================
动态的网页技术（DHTM）已经非常普及，本文强力向大家推荐一段完整并且是经典的网页多层代码，适用于IE及NETSCAPE游览器，可实现完善的二层网页功能，具体代码请见面文后程序。 北京网页设计
网站设计
该段代码功能：打开该网页文件之后，将在正常的网页之上，浮动另外一层网页内容，可用鼠标随意移动第二层网页在第一层上的位置，并且当屏幕滚动时，第二图层可始终保持同第一图层的相对位置，效果非常好。 网站设计
网站设计
适用场合：有了这段代码，你可以对很多原有的网页进行改造，使游览者更为方便，比如可用于留言簿，第一层放置留言内容，浮动的第二层放置留言表单，这样游览留言操作和观察留言内容可在同一页面完成，并且无论屏幕滚动到什么位置，留言表单始终出现在屏幕之上，这无疑是最方便的留言系统工作方式。再比如可做为一般网页的导航条，有很多人为了编制美观的页面而放弃使用分栏导航页面方式，而使用整个页面，这样的页面每进入到一个分栏目，都要重新调入整个页面。有了这项技术，可以在原完整的页面之上，浮动一层导航菜单，即方便了导航又保持了页面的完整。另外也可以在某些页面之上浮动一个特定的图像或其它页面内容，等等，总之，这种技术应用非常广泛。 网站设计 网站建设
北京网页设计
代码说明：代码段一可放置在网页的文件头处，即段。代码段二为正常的网页内容，即第一层的代码内容。第三段为第二层网页的代码段，即浮动的网页内容。代码段四为必要的控制代码，可放置在网页的最后处。灵活使用：下面的代码是完整的网页文件代码，把代码段二和代码段三换成你自己所需要的内容就可以了，但由于本网页文件涉及两个网页的制作过程，可能制作起来相当费力，并且很多网页制作工具不支持这一功能，用低级的网页工具存盘后将失去浮动效果，所以对于这样的网页最好的维护方法是分页维护，即分别编制两个完整的网页内容，之后按要求合并在一个网页文件内即可。这样向你介绍一种最可取的方法，众所周知，现在的网页技术可以实现在一个网页内调用其它网页的功能，即所谓的画中画功能，所以完全可以把代码二和代码三换成固定的调用其它网页的固定代码，之后只需要对这两个单独的页维护就可以了。具体可用下面的代码替换代码二和三： 网站制作
网页设计
ILAYER id="ad1" visibility="hidden" height="60"> 北京网站设计
</ILAYER> 网站设计
<NOLAYER> www.qitongnet.com
<IFRAME SRC="h1.htm" width="100%" height="60" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"> 北京网站制作
</IFRAME> 其中SRC:用于指定打开的网页地址; 北京网站建设
width:该表格占用的宽度; 网站设计
height:该表格点用的高度; 北京网站制作
marginwidth:网页内容在表格右侧的预留宽度; www.qitongnet.com
marginheight:网页内容在表格顶部预留的高度; 北京网站设计 www.qitongnet.com
hspace:网页右上角的横坐标; 网站制作
vspace:网页右上角的纵坐标; 网页设计
frameborder:是否显示边缘; www.qitongnet.com
scrolling:是否出现滚动条; 北京网站设计
具体使用时把h1.htm分别换成不同的网页文件名。 网站制作
完成的网页文件代码如下： 北京网页设计
<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> 北京网站制作
//代码段一结束 网站制作
<title>浮动层</title> 北京网站设计
</head> 网站制作
//代码段二（第一层内容，目前为空） 网页设计 网站建设
<body bgcolor="#FFFFFF"> 企通互联
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> 北京网站建设
//代码段二结束 网页设计
//代码段三（浮动层内容，目前为一简单表格） 网站建设
<div ID="floater" style="left: 0px; top: 1px"> 网站设计
<table border="1" cellpadding="0" cellspacing="0" 企通互联
bgcolor="#25A78D" bordercolordark="#00FFFF" www.qitongnet.com
bordercolorlight="#000000"> 网站建设
<tr> 网页设计
<td>111<a href="file:///G:/C/NEW/dhtml2.htm">1111</a></td> 企通互联
<td>2222222</td> www.qitongnet.com
</tr> 网站建设
</table> www.qitongnet.com
</div> 企通互联
//代码段三结束 网页设计
//代码段四 www.qitongnet.com
<script LANGUAGE="JavaScript"> 北京网站制作
self.onError=null; 网页设计
currentX = currentY = 0; 北京网站建设
whichIt = null; 北京网页设计
lastScrollX = 0; lastScrollY = 0; 北京网站设计
NS = (document.layers) ? 1 : 0; www.qitongnet.com
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); www.qitongnet.com
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; www.qitongnet.com
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)) { www.qitongnet.com
whichIt = document.floater; 网页设计
StalkerTouchedX = e.pageX-document.floater.pageX; 网页设计
StalkerTouchedY = e.pageY-document.floater.pageY; } } 北京网站设计
return true;} www.qitongnet.com
function moveIt(e) { 北京网站建设
if (whichIt == null) { return false; } 北京网页设计
if(IE) { 网站建设
newX = (event.clientX + document.body.scrollLeft); www.qitongnet.com
newY = (event.clientY + document.body.scrollTop); 网站建设 北京网页设计
distanceX = (newX - currentX); distanceY = (newY - currentY); www.qitongnet.com
currentX = newX; currentY = newY; www.qitongnet.com
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 { www.qitongnet.com
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); www.qitongnet.com
return true; } 北京网站建设
<!-- DRAG DROP CODE --> 北京网页设计
if(NS) { www.qitongnet.com
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN); www.qitongnet.com
window.onmousedown = grabIt; 北京网站设计
window.onmousemove = moveIt; www.qitongnet.com
window.onmouseup = dropIt; } 网站设计
if(IE) { 企通互联
document.onmousedown = grabIt; www.qitongnet.com
document.onmousemove = moveIt; 网页设计
document.onmouseup = dropIt; } 北京网站设计
if(NS || IE) action = window.setInterval("heartBeat()",1); 北京网站设计
</script> 北京网站设计
//代码段四结束 网页设计
</body> 北京网站建设
</html>www.qitongnet.com
网页设计
|
|
网站设计
该段代码功能：打开该网页文件之后，将在正常的网页之上，浮动另外一层网页内容，可用鼠标随意移动第二层网页在第一层上的位置，并且当屏幕滚动时，第二图层可始终保持同第一图层的相对位置，效果非常好。 网站设计
网站设计
适用场合：有了这段代码，你可以对很多原有的网页进行改造，使游览者更为方便，比如可用于留言簿，第一层放置留言内容，浮动的第二层放置留言表单，这样游览留言操作和观察留言内容可在同一页面完成，并且无论屏幕滚动到什么位置，留言表单始终出现在屏幕之上，这无疑是最方便的留言系统工作方式。再比如可做为一般网页的导航条，有很多人为了编制美观的页面而放弃使用分栏导航页面方式，而使用整个页面，这样的页面每进入到一个分栏目，都要重新调入整个页面。有了这项技术，可以在原完整的页面之上，浮动一层导航菜单，即方便了导航又保持了页面的完整。另外也可以在某些页面之上浮动一个特定的图像或其它页面内容，等等，总之，这种技术应用非常广泛。 网站设计 网站建设
北京网页设计
代码说明：代码段一可放置在网页的文件头处，即段。代码段二为正常的网页内容，即第一层的代码内容。第三段为第二层网页的代码段，即浮动的网页内容。代码段四为必要的控制代码，可放置在网页的最后处。灵活使用：下面的代码是完整的网页文件代码，把代码段二和代码段三换成你自己所需要的内容就可以了，但由于本网页文件涉及两个网页的制作过程，可能制作起来相当费力，并且很多网页制作工具不支持这一功能，用低级的网页工具存盘后将失去浮动效果，所以对于这样的网页最好的维护方法是分页维护，即分别编制两个完整的网页内容，之后按要求合并在一个网页文件内即可。这样向你介绍一种最可取的方法，众所周知，现在的网页技术可以实现在一个网页内调用其它网页的功能，即所谓的画中画功能，所以完全可以把代码二和代码三换成固定的调用其它网页的固定代码，之后只需要对这两个单独的页维护就可以了。具体可用下面的代码替换代码二和三： 网站制作
网页设计
ILAYER id="ad1" visibility="hidden" height="60"> 北京网站设计
</ILAYER> 网站设计
<NOLAYER> www.qitongnet.com
<IFRAME SRC="h1.htm" width="100%" height="60" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"> 北京网站制作
</IFRAME> 其中SRC:用于指定打开的网页地址; 北京网站建设
width:该表格占用的宽度; 网站设计
height:该表格点用的高度; 北京网站制作
marginwidth:网页内容在表格右侧的预留宽度; www.qitongnet.com
marginheight:网页内容在表格顶部预留的高度; 北京网站设计 www.qitongnet.com
hspace:网页右上角的横坐标; 网站制作
vspace:网页右上角的纵坐标; 网页设计
frameborder:是否显示边缘; www.qitongnet.com
scrolling:是否出现滚动条; 北京网站设计
具体使用时把h1.htm分别换成不同的网页文件名。 网站制作
完成的网页文件代码如下： 北京网页设计
<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> 北京网站制作
//代码段一结束 网站制作
<title>浮动层</title> 北京网站设计
</head> 网站制作
//代码段二（第一层内容，目前为空） 网页设计 网站建设
<body bgcolor="#FFFFFF"> 企通互联
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> 北京网站建设
//代码段二结束 网页设计
//代码段三（浮动层内容，目前为一简单表格） 网站建设
<div ID="floater" style="left: 0px; top: 1px"> 网站设计
<table border="1" cellpadding="0" cellspacing="0" 企通互联
bgcolor="#25A78D" bordercolordark="#00FFFF" www.qitongnet.com
bordercolorlight="#000000"> 网站建设
<tr> 网页设计
<td>111<a href="file:///G:/C/NEW/dhtml2.htm">1111</a></td> 企通互联
<td>2222222</td> www.qitongnet.com
</tr> 网站建设
</table> www.qitongnet.com
</div> 企通互联
//代码段三结束 网页设计
//代码段四 www.qitongnet.com
<script LANGUAGE="JavaScript"> 北京网站制作
self.onError=null; 网页设计
currentX = currentY = 0; 北京网站建设
whichIt = null; 北京网页设计
lastScrollX = 0; lastScrollY = 0; 北京网站设计
NS = (document.layers) ? 1 : 0; www.qitongnet.com
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); www.qitongnet.com
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; www.qitongnet.com
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)) { www.qitongnet.com
whichIt = document.floater; 网页设计
StalkerTouchedX = e.pageX-document.floater.pageX; 网页设计
StalkerTouchedY = e.pageY-document.floater.pageY; } } 北京网站设计
return true;} www.qitongnet.com
function moveIt(e) { 北京网站建设
if (whichIt == null) { return false; } 北京网页设计
if(IE) { 网站建设
newX = (event.clientX + document.body.scrollLeft); www.qitongnet.com
newY = (event.clientY + document.body.scrollTop); 网站建设 北京网页设计
distanceX = (newX - currentX); distanceY = (newY - currentY); www.qitongnet.com
currentX = newX; currentY = newY; www.qitongnet.com
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 { www.qitongnet.com
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); www.qitongnet.com
return true; } 北京网站建设
<!-- DRAG DROP CODE --> 北京网页设计
if(NS) { www.qitongnet.com
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN); www.qitongnet.com
window.onmousedown = grabIt; 北京网站设计
window.onmousemove = moveIt; www.qitongnet.com
window.onmouseup = dropIt; } 网站设计
if(IE) { 企通互联
document.onmousedown = grabIt; www.qitongnet.com
document.onmousemove = moveIt; 网页设计
document.onmouseup = dropIt; } 北京网站设计
if(NS || IE) action = window.setInterval("heartBeat()",1); 北京网站设计
</script> 北京网站设计
//代码段四结束 网页设计
</body> 北京网站建设
</html>www.qitongnet.com
网页设计