» 您尚未 登录   注册 | 社区服务 | 帮助 | 社区 | 无图版


常州五颜六色网络技术有限公司 -> 网站建设 -> 网页中多层效果的灵活使用
 XML   RSS 2.0   WAP 

--> 本页主题: 网页中多层效果的灵活使用 加为IE收藏 | 收藏主题 | 上一主题 | 下一主题
阿七




该用户目前不在线
级别: 未验证会员
精华: 0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
查看作者资料 发送短消息 推荐此帖 引用回复这个帖子

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

动态的网页技术（DHTM）已经非常普及，本文强力向大家推荐一段完整并且是经典的网页多层代码，适用于IE及NETSCAPE游览器，可实现完善的二层网页功能，具体代码请见面文后程序。 |[p]]) o  
TxH amI l  
　　该段代码功能：打开该网页文件之后，将在正常的网页之上，浮动另外一层网页内容，可用鼠标随意移动第二层网页在第一层上的位置，并且当屏幕滚动时，第二图层可始终保持同第一图层的相对位置，效果非常好。 'UTMEN&  
=@&>r5W 1  
　　适用场合：有了这段代码，你可以对很多原有的网页进行改造，使游览者更为方便，比如可用于留言簿，第一层放置留言内容，浮动的第二层放置留言表单，这样游览留言操作和观察留言内容可在同一页面完成，并且无论屏幕滚动到什么位置，留言表单始终出现在屏幕之上，这无疑是最方便的留言系统工作方式。再比如可做为一般网页的导航条，有很多人为了编制美观的页面而放弃使用分栏导航页面方式，而使用整个页面，这样的页面每进入到一个分栏目，都要重新调入整个页面。有了这项技术，可以在原完整的页面之上，浮动一层导航菜单，即方便了导航又保持了页面的完整。另外也可以在某些页面之上浮动一个特定的图像或其它页面内容，等等，总之，这种技术应用非常广泛。 "Xl"H/3r  
aiZZz1C   
　代码说明：代码段一可放置在网页的文件头处，即段。代码段二为正常的网页内容，即第一层的代码内容。第三段为第二层网页的代码段，即浮动的网页内容。代码段四为必要的控制代码，可放置在网页的最后处。灵活使用：下面的代码是完整的网页文件代码，把代码段二和代码段三换成你自己所需要的内容就可以了，但由于本网页文件涉及两个网页的制作过程，可能制作起来相当费力，并且很多网页制作工具不支持这一功能，用低级的网页工具存盘后将失去浮动效果，所以对于这样的网页最好的维护方法是分页维护，即分别编制两个完整的网页内容，之后按要求合并在一个网页文件内即可。这样向你介绍一种最可取的方法，众所周知，现在的网页技术可以实现在一个网页内调用其它网页的功能，即所谓的画中画功能，所以完全可以把代码二和代码三换成固定的调用其它网页的固定代码，之后只需要对这两个单独的页维护就可以了。具体可用下面的代码替换代码二和三： #GfM^sK  
>[~`rOU*|Y  
ILAYER id="ad1" visibility="hidden" height="60"> C>F5=&  
</ILAYER> _n4_;0  
<NOLAYER> =$T[  
<IFRAME SRC="h1.htm" width="100%" height="60" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"> 06`caG|]-M  
</IFRAME> 其中SRC:用于指定打开的网页地址; ~Q]/=H K  
width:该表格占用的宽度; |+Z-'k~Q  
height:该表格点用的高度; \^!<Y\\  
marginwidth:网页内容在表格右侧的预留宽度; jaIcIc=Pf  
marginheight:网页内容在表格顶部预留的高度; Y1F%-o  
hspace:网页右上角的横坐标; X_)I" `  
vspace:网页右上角的纵坐标; x7i,jMR  
frameborder:是否显示边缘; ')iyD5/4  
scrolling:是否出现滚动条; #Fgybokm  
具体使用时把h1.htm分别换成不同的网页文件名。 e@ 5w?QzW  
完成的网页文件代码如下： QtcYFf g  
<html> $O fZp<M  
<head> >u|4490<0  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> @wVDe\% ,  
//代码段一 !<F5W <V  
<style type="text/css"><!-- };'~@%U]/  
#floater {position: absolute;left: 500;top: 146;width: 125;visibility: visible;z-index: 10;} 0Ag2zx  
--> ]<9o>#3  
</style> c0_5 12  
//代码段一结束 6aWNLJ @  
<title>浮动层</title> `'9t^ 6mk  
</head> *8/cd0  
//代码段二（第一层内容，目前为空） yb\!4ml  
<body bgcolor="#FFFFFF"> 82 1 6_Qm  
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> Wi*HLP!lNC  
//代码段二结束 ~F;>4q   
//代码段三（浮动层内容，目前为一简单表格） nFefDdP  
<div ID="floater" style="left: 0px; top: 1px"> g}BS:#$  
<table border="1" cellpadding="0" cellspacing="0" Hx9lQ8  
bgcolor="#25A78D" bordercolordark="#00FFFF" "msPH<D  
bordercolorlight="#000000"> < [17&F0  
<tr> `R-VJR 2"  
<td>111<a href="file:///G:/C/NEW/dhtml2.htm">1111</a></td> }9Q<<a  
<td>2222222</td> HzZX=c  
</tr> ;v ~xL!uQ  
</table> ~-A"M_n ?  
</div> vs*@)'n0}  
//代码段三结束 LO k J  
//代码段四 u}jC$T>2%6  
<script LANGUAGE="JavaScript"> (V`ddP-  
self.onError=null; # tU@\H5kN  
currentX = currentY = 0; ?cD_\~  
whichIt = null; >NA{**$0  
lastScrollX = 0; lastScrollY = 0; UJ&gm_M+kL  
NS = (document.layers) ? 1 : 0; vARZwIu^D  
IE = (document.all) ? 1: 0; "I3&a1*  
<!-- STALKER CODE --> &G7@lz@sK+  
function heartBeat() {  \>e>J\t:  
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } U> {CG+X  
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; } q/3co86c  
if(diffY != lastScrollY) { "IoY$!Hk  
percent = .1 * (diffY - lastScrollY); zi,":KDz#  
if(percent > 0) percent = Math.ceil(percent); ^ANz=`N5,  
else percent = Math.floor(percent); `u7twW*U2  
if(IE) document.all.floater.style.pixelTop += percent;  w1t0X{  
if(NS) document.floater.top += percent; |d_ rK2  
lastScrollY = lastScrollY + percent; } ,jMV # H[  
if(diffX != lastScrollX) { V(n3W=#kky  
percent = .1 * (diffX - lastScrollX); h>"Z=y  
if(percent > 0) percent = Math.ceil(percent); 7x`4P|Uu  
else percent = Math.floor(percent); :']O4v#^  
if(IE) document.all.floater.style.pixelLeft += percent; %l)~C%T  
if(NS) document.floater.left += percent; 9;EY3[N  
lastScrollX = lastScrollX + percent;}} Y ^uYc}  
<!-- /STALKER CODE --> X[o"9O|<  
<!-- DRAG DROP CODE --> DT#Z6A  
function checkFocus(x,y) { IR*:i{  
stalkerx = document.floater.pageX; |n.ydyu`  
stalkery = document.floater.pageY; 0d=<^wLi^  
stalkerwidth = document.floater.clip.width; }F (lffb  
stalkerheight = document.floater.clip.height; 2v\-xg%1  
if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true; ?C9>bKo*2H  
else return false; } fT_swh IO  
function grabIt(e) { @7<m.?A!  
if(IE) {whichIt = event.srcElement; *gXm&/2*  
while (whichIt.id.indexOf("floater") == -1) { &0S/]E`_M  
whichIt = whichIt.parentElement; 1Du9N[2'P  
if (whichIt == null) { return true; } } L\UM12  
whichIt.style.pixelLeft = whichIt.offsetLeft; 5A i$1'*p  
whichIt.style.pixelTop = whichIt.offsetTop; )d-{#  
currentX = (event.clientX + document.body.scrollLeft); V/7?]?!xu  
currentY = (event.clientY + document.body.scrollTop); } else { :7Q, `W9  
window.captureEvents(Event.MOUSEMOVE); 3$ 1 z  
if(checkFocus (e.pageX,e.pageY)) { m =2e1wc  
whichIt = document.floater; ;]^JUmxU[d  
StalkerTouchedX = e.pageX-document.floater.pageX; 3 ,?==?  
StalkerTouchedY = e.pageY-document.floater.pageY; } } TID0x/j"K5  
return true;} 9#@CmiIhy  
function moveIt(e) { *oX~z>a E  
if (whichIt == null) { return false; } v+Q# O[  
if(IE) { 9jwo f}OU  
newX = (event.clientX + document.body.scrollLeft); %C[ ;&  
newY = (event.clientY + document.body.scrollTop); Ma3Hn  
distanceX = (newX - currentX); distanceY = (newY - currentY); TGz5t$]I  
currentX = newX; currentY = newY; G{ $Zg  
whichIt.style.pixelLeft += distanceX; J ZQ$ *K  
whichIt.style.pixelTop += distanceY; HiG&`:P>q  
if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop; rkl/5z??  
if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft; EF{_-FXY  
if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20; Q=9S?p M  
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; f:TC;K  
event.returnValue = false; 'vTD7a^  
} else { d}',Bl+u{$  
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY); Q_#X*I  
if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset; p$@=N6)I.k  
if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset; /7h%sCX  
if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+ self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17; f K^FD&sF  
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+ self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17; {R,rc!yF  
return false; } return false; } *(d^ k;  
function dropIt() { a@,tf'Sr  
whichIt = null; $b$r,mc  
if(NS) window.releaseEvents (Event.MOUSEMOVE); ,lA J{5\#  
return true; } m$hSL4 N  
<!-- DRAG DROP CODE --> 8yFD2(#  
if(NS) { o<P%|>qX  
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN); &"C1XM  
window.onmousedown = grabIt; G';oM;~/|  
window.onmousemove = moveIt; OR"ni  
window.onmouseup = dropIt; } 6nGDoW#  
if(IE) {  |Be.r{l  
document.onmousedown = grabIt; zLXtj-  
document.onmousemove = moveIt; rhn*k f{8  
document.onmouseup = dropIt; } "l +Jx|h\  
if(NS || IE) action = window.setInterval("heartBeat()",1); 4VU5}"<  
</script> }.b[az\T  
//代码段四结束 5K6_#g4"  
</body> l1W5pmhK]'  
</html>
[楼 主] | Posted: 2006-04-04 09:10 顶端

常州五颜六色网络技术有限公司 -> 网站建设


Copyright © 2005-2009 5y6s Inc. 苏ICP备05001866号 Powered by PHPWind 5.0.1
Total 0.026771(s) query 6, Gzip enabled
会员言论不代表本站立场 本站法律顾问：北京汇泽律师事务所 韩律师
QQ:点击这里给我发消息 /点击这里给我发消息 /点击这里给我发消息