This page is cool. Small windows move above the home page, you can minimize, restore, close these small windows, or drag them to any location on the home page. The sample interface is as follows:
For detailed usage, see the complete page code below.
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Meta name = "generator" content = "Microsoft FrontPage 6.0">
<Script language = JScript>
<! --
// It can be packaged as a JS file;
VaR X0 = 0, Y0 = 0, X1 = 0, Y1 = 0;
VaR offx = 6, offy = 6;
VaR moveable = false;
VaR hover = 'Orange ', normal = 'slateegray'; // color;
VaR Index = 10000; // Z-index;
// Start dragging;
Function startdrag (OBJ)
{
If (event. Button = 1)
{
// Lock the title bar;
OBJ. setcapture ();
// Define the object;
VaR win = obj. parentnode;
VaR Sha = win. nextsibling;
// Record the mouse and layer position;
X0 = event. clientx;
Y0 = event. clienty;
X1 = parseint (win. style. Left );
Y1 = parseint (win. style. Top );
// Record the color;
Normal = obj. style. backgroundcolor;
// Change the style;
OBJ. style. backgroundcolor = hover;
Win. style. bordercolor = hover;
OBJ. nextsibling. style. Color = hover;
Sha. style. Left = X1 + offx;
Sha. style. Top = Y1 + offy;
Moveable = true;
}
}
// Drag;
Function drag (OBJ)
{
If (moveable)
{
VaR win = obj. parentnode;
VaR Sha = win. nextsibling;
Win. style. Left = X1 + event. clientx-x0;
Win. style. Top = Y1 + event. clienty-y0;
Sha. style. Left = parseint (win. style. Left) + offx;
Sha. style. Top = parseint (win. style. Top) + offy;
}
}
// Stop dragging;
Function stopdrag (OBJ)
{
If (moveable)
{
VaR win = obj. parentnode;
VaR Sha = win. nextsibling;
VaR MSG = obj. nextsibling;
Win. style. bordercolor = normal;
OBJ. style. backgroundcolor = normal;
MSG. style. Color = normal;
Sha. style. Left = obj. parentnode. style. Left;
Sha. style. Top = obj. parentnode. style. Top;
OBJ. releasecapture ();
Moveable = false;
}
}
// Obtain the focus;
Function getfocus (OBJ)
{
If (obj. style. zindex! = Index)
{
Index = index + 2;
VaR idx = index;
OBJ. style. zindex = idx;
OBJ. nextsibling. style. zindex = idx-1;
}
}
// Minimize;
Function min (OBJ)
{
VaR win = obj. parentnode. parentnode;
VaR Sha = win. nextsibling;
VaR tit = obj. parentnode;
VaR MSG = tit. nextsibling;
VaR flg = msg. style. Display = "NONE ";
If (flg)
{
Win. style. Height = parseint (msg. style. Height) + parseint (tit. style. Height) + 2*2;
Sha. style. Height = win. style. height;
MSG. style. Display = "Block ";
OBJ. innerhtml = "0 ";
}
Else
{
Win. style. Height = parseint (tit. style. Height) + 2*2;
Sha. style. Height = win. style. height;
OBJ. innerhtml = "2 ";
MSG. style. Display = "NONE ";
}
}
// Close;
Function Cls (OBJ)
{
VaR win = obj. parentnode. parentnode;
VaR Sha = win. nextsibling;
Win. style. Visibility = "hidden ";
Sha. style. Visibility = "hidden ";
}
// Create an object;
Function xwin (ID, W, H, L, t, tit, MSG)
{
Index = index + 2;
This. ID = ID;
This. width = W;
This. Height = h;
This. Left = L;
This. Top = T;
This. zindex = index;
This. Title = tit;
This. Message = MSG;
This. OBJ = NULL;
This. bulid = bulid;
This. bulid ();
}
// Initialization;
Function bulid ()
{
VaR STR = ""
+ "<Div id = xmsg" + this. ID + ""
+ "Style = '"
+ "Z-index:" + this. zindex + ";"
+ "Width:" + this. Width + ";"
+ "Height:" + this. height + ";"
+ "Left:" + this. Left + ";"
+ "Top:" + this. Top + ";"
+ "Background-color:" + normal + ";"
+ "Color:" + normal + ";"
+ "Font-size: 10px ;"
+ "Font-family: verdana ;"
+ "Position: absolute ;"
+ "Cursor: default ;"
+ "Border: 2px solid" + normal + ";"
+ "'"
+ "Onmousedown = 'getfocus (this) '>"
+ "<Div"
+ "Style = '"
+ "Background-color:" + normal + ";"
+ "Width:" + (this. Width-2*2) + ";"
+ "Height: 20 ;"
+ "Color: White ;"
+ "'"
+ "Onmousedown = 'startdrag (this )'"
+ "Onmouseup = 'stopdrag (this )'"
+ "Onmousemove = 'drag (this )'"
+ "Ondblclick = 'min (this. childnodes [1]) '"
+ ">"
+ "<Span style = 'width:" + (this. width-2*12-4) + "; padding-left: 3px; '>" + this. title + "</span>"
+ "<Span style = 'width: 12; border-width: 0px; color: White; font-family: webdings; 'onclick = 'min (this) '> 0 </span>"
+ "<Span style = 'width: 12; border-width: 0px; color: White; font-family: webdings; 'onclick = 'cls (this) '> r </span>"
+ "</Div>"
+ "<Div style = '"
+ "Width: 100% ;"
+ "Height:" + (this. Height-20-4) + ";"
+ "Background-color: White ;"
+ "Line-Height: 14px ;"
+ "Word-break: Break-all ;"
+ "Padding: 3px ;"
+ "'>" + This. Message + "</div>"
+ "</Div>"
+ "<Div style = '"
+ "Width:" + this. Width + ";"
+ "Height:" + this. height + ";"
+ "Top:" + this. Top + ";"
+ "Left:" + this. Left + ";"
+ "Z-index:" + (this. zIndex-1) + ";"
+ "Position: absolute ;"
+ "Background-color: black ;"
+ "Filter: alpha (opacity = 40 );"
+ "'> By Wildwind </div> ";
Document. Body. insertadjacenthtml ("beforeend", STR );
}
// -->
</SCRIPT>
<Script language = 'jscript'>
<! --
Function initialize ()
{
VaR A = new xwin ("1", 100,200, "arui1", "test1 ");
VaR B = new xwin ("2", 100,200, 0,200, "arui2", "Test2 ");
// Var c = new xwin ("3", 200,160,250, 50, "arui3", "test3 ");
}
Window. onload = initialize;
// -->
</SCRIPT>
<Title> [floating page] </title>
</Head>
<Body topmargin = "0" leftmargin = "1">
</Html>