网页中多层效果的灵活使用

添加时间：2010-1-5

相关阅读: 网页技术页面程序 JavaScript 制作维护

动态的网页技术（DHTM）已经非常普及，本文强力向大家推荐一段完整并且是经典的网页多层代码，适用于IE及NETSCAPE游览器，可实现完善的二层网页功能，具体代码请见面文后程序。

　　该段代码功能：打开该网页文件之后，将在正常的网页之上，浮动另外一层网页内容，可用鼠标随意移动第二层网页在第一层上的位置，并且当屏幕滚动时，第二图层可始终保持同第一图层的相对位置，效果非常好。

　　适用场合：有了这段代码，你可以对很多原有的网页进行改造，使游览者更为方便，比如可用于留言簿，第一层放置留言内容，浮动的第二层放置留言表单，这样游览留言操作和观察留言内容可在同一页面完成，并且无论屏幕滚动到什么位置，留言表单始终出现在屏幕之上，这无疑是最方便的留言系统工作方式。再比如可做为一般网页的导航条，有很多人为了编制美观的页面而放弃使用分栏导航页面方式，而使用整个页面，这样的页面每进入到一个分栏目，都要重新调入整个页面。有了这项技术，可以在原完整的页面之上，浮动一层导航菜单，即方便了导航又保持了页面的完整。另外也可以在某些页面之上浮动一个特定的图像或其它页面内容，等等，总之，这种技术应用非常广泛。

　　代码说明：代码段一可放置在网页的文件头处，即段。代码段二为正常的网页内容，即第一层的代码内容。第三段为第二层网页的代码段，即浮动的网页内容。代码段四为必要的控制代码，可放置在网页的最后处。灵活使用：下面的代码是完整的网页文件代码，把代码段二和代码段三换成你自己所需要的内容就可以了，但由于本网页文件涉及两个网页的制作过程，可能制作起来相当费力，并且很多工具不支持这一功能，用低级的网页工具存盘后将失去浮动效果，所以对于这样的网页最好的维护方法是分页维护，即分别编制两个完整的网页内容，之后按要求合并在一个网页文件内即可。这样向你介绍一种最可取的方法，众所周知，现在的网页技术可以实现在一个网页内调用其它网页的功能，即所谓的画中画功能，所以完全可以把代码二和代码三换成固定的调用其它网页的固定代码，之后只需要对这两个单独的页维护就可以了。具体可用下面的代码替换代码二和三：

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:用于指定打开的网页地址;
width:该表格占用的宽度;
height:该表格点用的高度;
marginwidth:网页内容在表格右侧的预留宽度;
marginheight:网页内容在表格顶部预留的高度;
hspace:网页右上角的横坐标;
vspace:网页右上角的纵坐标;
frameborder:是否显示边缘;
scrolling:是否出现滚动条;
具体使用时把h1.htm分别换成不同的网页文件名。
完成的网页文件代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
//代码段一
<style type="text/css">
</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"
bordercolorlight="#000000">
<tr>
<td>111<a href="file:///G:/C/NEW/dhtml2.htm">1111</a></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;

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;}}


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; }

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>
//代码段四结束
</body>
</html>

本文作者:

相关网页中多层效果的灵活使用

实现网页渐入特殊效果 [2010-1-5]

shtml网页SSI使用详解 [2010-1-5]

为你的网页做出电影的过场效果 [2010-1-5]

网页设计:一种细腻的导航效果的制作方法 [2010-1-5]

中文网页制作中段落缩进的方法 [2010-1-5]

简单实用的网页表格特效 [2010-1-5]

网页中多层效果的灵活使用

实现网页渐入特殊效果 [2010-1-5] shtml网页SSI使用详解 [2010-1-5] 为你的网页做出电影的过场效果 [2010-1-5] 网页设计:一种细腻的导航效果的制作方法 [2010-1-5] 中文网页制作中段落缩进的方法 [2010-1-5] 简单实用的网页表格特效 [2010-1-5]