网页中多层效果的灵敏运用
日期：2013-11-27 浏览次数：20893 次
该段代码功用：打开该网页文件之后，将在正常的网页之上，浮动另外一层网页内容，可用鼠标随意挪动第二层网页在第一层上的位置，并且当屏幕滚动时，第二图层可一直保持同第一图层的绝对位置，效果非常好。
适用场合：有了这段代码，你可以对很多原有的网页进行改造，使旅游者更为方便，比如可用于留言簿，第一层放置留言内容，浮动的第二层放置留言表单，这样旅游留言操作和观察留言内容可在同一页面完成，并且无论屏幕滚动到什么位置，留言表单一直出如今屏幕之上，这无疑是最方便的留言系统任务方式。再比如可做为普通网页的导航条，有很多人为了编制美观的页面而放弃使用分栏导航页面方式，而使用整个页面，这样的页面每进入到一个分栏目，都要重新调入整个页面。有了这项技术，可以在原完整的页面之上，浮动一层导航菜单，即方便了导航又保持了页面的完整。另外也可以在某些页面之上浮动一个特定的图像或其它页面内容，等等，总之，这种技术使用非常广泛。
代码说明：代码段一可放置在网页的文件头处，即段。代码段二为正常的网页内容，即第一层的代码内容。第三段为第二层网页的代码段，即浮动的网页内容。代码段四为必要的控制代码，可放置在网页的最后处。灵活使用：下面的代码是完整的网页文件代码，把代码段二和代码段三换成你本人所需求的内容就可以了，但由于本网页文件涉及两个网页的制造过程，可能制造起来相当费力，并且很多网页制造工具不支持这一功用，用低级的网页工具存盘后将得到浮动效果，所以对于这样的网页最好的维护方法是分页维护，即分别编制两个完整的网页内容，之后按要求合并在一个网页文件内即可。这样向你引见一种最可取的方法，众所周知，如今的网页技术可以实如今一个网页内调用其它网页的功用，即所谓的画中画功用，所以完全可以把代码二和代码三换成固定的调用其它网页的固定代码，之后只需求对这两个单独的页维护就可以了。具体可用下面的代码替换代码二和三：
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"><!--
#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"
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;
<!-- 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 =
