Flexible use of multi-layered effects in web pages

Web page Dynamic Web technology (dhtm) has been very popular, this article strongly recommend a complete and classic Web page multi-layer code, suitable for IE and Netscape browser, can achieve a complete two-layer Web page features, specific code please meet the text after the program.

This section of code features: Open the Web page file, will be on the normal page, floating another layer of Web page content, free mouse to move the second level of the page on the first level of the position, and when the screen scrolling, the second layer can always maintain the relative position of the first layer, the effect is very good.

Applicable occasions: With this code, you can transform many of the original web pages, so that visitors are more convenient, such as can be used for the guest book, the first layer to place message content, floating the second layer to place a message form, so that the tour message operation and observation message content can be completed on the same page, and regardless of the screen scrolling The message form always appears on the screen, which is undoubtedly the most convenient way to work the message system. For example, as a general Web navigation, there are a lot of people in order to prepare beautiful pages and discard the use of the column navigation page, and the use of the entire page, such a page into a separate column, to be redeployed to the entire page. With this technology, you can in the original complete page, floating a layer of navigation menu, that is, convenient navigation and maintain the integrity of the page. You can also float a specific image or other page content on some pages, and so on, in short, this technology is widely used.

Code Description: The code snippet can be placed at the head of a Web page, that is, a paragraph. Code snippet Two is the normal Web page content, that is, the first layer of code content. The third paragraph is the code snippet for the second level page, which is the content of the floating Web page. Code snippet Four is the necessary control code and can be placed at the end of the page. Flexible use: The following code is the complete Web page file code, the code snippet two and Code section three for your own content can be, but because this page file involves two pages of the production process, may be very laborious to make, and many web-making tools do not support this function, The use of low-level web tools will lose the floating effect, so the best way to maintain the Web page is paging maintenance, that is, the preparation of two complete Web page content, and then merged in a Web page file. This introduces you to one of the most desirable methods, as we all know, today's web page technology can be implemented in a Web page to invoke the function of other Web pages, that is, the so-called painting function, so you can completely change code two and code three fixed to call the other Web page of the fixed code, then only need to these two separate pages to maintain it. The following code can be used to replace code two and three:

Ilayer id= "Ad1" visibility= "hidden" height= ">"
</ILAYER>
<NOLAYER>
<iframe src= "h1.htm" width= "100%" height= "0" marginwidth= "0" marginheight= "0" hspace= "" vspace= "0" frameborder= "0 "Scrolling=" No ">
</IFRAME> src: Used to specify open web address;
Width: The size of the table occupied;
Height: the level at which the table is used;
Marginwidth: The width of the page content on the right side of the table;
Marginheight: the height reserved on the top of the table for the content of the Web page;
Hspace: The horizontal axis of the upper right corner of the webpage;
Vspace: The vertical axis of the upper right corner of the webpage;
Frameborder: whether to display edges;
Scrolling: Whether the scroll bar appears;
In the specific use of the h1.htm, respectively, to different Web page file name.
The completed page file code is as follows:

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
Code Snippet One
<style type= "Text/css" ><!--
#floater {position:absolute;left:500;top:146;width:125;visibility:visible;z-index:10;}
-->
</style>
End of code snippet
<title> Floating Layer </title>

Code snippet two (first level content, currently empty)
<body bgcolor= "#FFFFFF" >
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR>
Code Snippet two End

Code snippet three (floating layer content, currently a simple table)
<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>
End of code snippet three

Code Snippet Four
<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+st alkerheight))) 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>
Code Snippet four End
</body>