Let me make a final answer to this question. I used to marvel at this special effect in the Flash zone, and I was so upset that I didn't know how to achieve it. I asked in the classic, a netizen enthusiastic answer my question, but only limited to how to add and "flash zone" the same effect, and is not perfect, in fact, this script can also achieve a lot of effects, I do not know is zippy or no use? But then look at the code look dizzy I still do not know how to achieve, fortunately, as time goes on, I finally found the answer to this question very satisfactorily. Please see:
This effect is a JS special effects, JS file name for Coollayer.js also has called overlib.js, it can achieve a very cool floating menu effect, there are 5 kinds of styles:
Style 1: no title bar
Style 2: Display title bar
Style 3: Click on the display title bar
Style 4: Click on the left to display the title bar
Style 5: Center display floating window
In the JS file, most of the need not to modify, you just change the size of the display font can be. Mainly modifies the HTML document page, because the pop-up floating window display content all by it control. Look at the source code, very easy to read. Like my new Web page: http://q3a.go.163.com
Parameter meaning: (caption--title)
OnMouseOver is controlled using the following function:
Center (center)
DCS (text)
DCC (text, caption)
Right
DRS (text)
DRC (text, caption)
Left
DLS (Text)
DLC (text, caption)
onMouseOut is controlled using the following function:
nd ()
The OnClick control is controlled by the following function:
SCC (text, caption)
SRC (text, caption)
SLC (text, caption)
The rest of the attention points:
The following 2 lines must be in the <BODY></BODY> label:
<div id= "Overdiv" style= "Position:absolute; Visibility:hide; z-index:1; " ></DIV>
<script language= "JavaScript" src= "Overlib.js" ></SCRIPT>
CSS with the following line of control, placed between
<link rel= "stylesheet" href= "Overlib.css" type= "Text/css" >
These are excerpts from the java2000 site's documentation on this special effect, and I've made a compression pack for everyone to download.
The address is http://go.163.com/~dreamwar/resource/downloads/classical/coollink.zip at the same time welcome everyone to my new website: "Thunder God War Dream" (http:// q3a.go.163.com) guest, than the flash zone of that special effect is also cool Oh!!
Attached java2000 's website: http://java2000.126.com
Attached coollayer.js (overlib.js) source file:
////////////////////////////////////////////////////////////////////////////////////
Overlib 2.22--please leave this notice.
//
by Erik Bosrup (erik@bosrup.com) Last modified 1999-03-31
Portions by Dan Steinman, Landon Bradshaw and Gnowknayme.
////////////////////////////////////////////////////////////////////////////////////
Please don't change it casually.
////////////////////////////////////////////////////////////////////////////////////
CONFIGURATION
////////////////////////////////////////////////////////////////////////////////////
Main background color (large area)
Usually use bright colors (light yellow, etc.). ）
if (typeof Fcolor = = ' undefined ') {var fcolor = "#CCCCFF";}
The color of the border and the color of the title bar;
The usual color is deep (brown, black, etc.). ）
if (typeof BackColor = = ' undefined ') {var BackColor = "#333399";}
The color of the text
usually a darker color;
if (typeof TextColor = = ' undefined ') {var textcolor = "#000000";}
Color of the title
usually a crisp color;
if (typeof Capcolor = = ' undefined ') {var capcolor = "#FFFFFF";}
Color of "close"
usually a crisp color;
if (typeof Closecolor = = ' undefined ') {var closecolor = "#9999FF";}
The width of the pop-up window;
100-300 pixels suitable
if (typeof width = = ' undefined ') {var width = "200";}
The width of the edge, the pixel.
1-3 pixels suitable
if (typeof border = = ' undefined ') {var border = "1";}
Pop-up window is located on the left or right side of the mouse, pixel.
3-12 fit
if (typeof offsetx = = ' undefined ') {var offsetx = 10;}
The distance at which the pop-up window is below the mouse;
3-12 fit
if (typeof offsety = = ' undefined ') {var offsety = 10;}
////////////////////////////////////////////////////////////////////////////////////
Set End
////////////////////////////////////////////////////////////////////////////////////
NS4 = (document.layers)? True:false
ie4 = (document.all)? True:false
Microsoft stupidity Check.
if (IE4) {
if (Navigator.userAgent.indexOf (' msie 5 ') >0) {
IE5 = true;
} else {
IE5 = false; }
} else {
IE5 = false;
}
var x = 0;
var y = 0;
var snow = 0;
var sw = 0;
var cnt = 0;
var dir = 1;
var tr = 1;
if ((NS4) | | (IE4)) {
if (ns4) over = Document.overdiv
if (ie4) over = Overdiv.style
Document.onmousemove = MouseMove
if (NS4) document.captureevents (event.mousemove)
}
The following is the public function used in the page;
Simple Popup Right
function Drs (text) {
DTS (1,text);
}
Caption Popup Right
function DRC (text, title) {
DTC (1,text,title);
}
Sticky caption Right
function src (text,title) {
STC (1,text,title);
}
Simple Popup Left
function DLs (text) {
DTS (0,text);
}
Caption Popup Left
function DLC (text, title) {
DTC (0,text,title);
}
Sticky caption Left
function SLC (text,title) {
STC (0,text,title);
}
Simple Popup Center
function DCs (text) {
DTS (2,text);
}
Caption Popup Center
function DCC (text, title) {
DTC (2,text,title);
}
Sticky Caption Center
function SCC (Text,title) {
STC (2,text,title);
}
Clears popups if appropriate
function nd () {
if (CNT >= 1) {sw = 0};
if ((NS4) | | (IE4)) {
if (sw = = 0) {
Snow = 0;
Hideobject (over);
} else {
cnt++;
}
}
}
Non-public function, which is called by other functions;
Simple Popup
function DTS (d,text) {
txt = "<table width=" +width+ "border=0 cellpadding=" +border+ "cellspacing=0 bgcolor=" "+backcolor+" "><TR> <td><table width=100% border=0 cellpadding=2 cellspacing=0 bgcolor= "" +fcolor+ "" ><TR><TD> <font face= "Song Body" color= "+textcolor+" ">" +text+ "</FONT></TD></TR></TABLE></TD> </TR></TABLE> "
Layerwrite (TXT);
dir = D;
Disp ();
}
Caption Popup
Function DTC (D,text, title) {
txt = "<table width=" +width+ "border=0 cellpadding=" +border+ "cellspacing=0 bgcolor=" "+backcolor+" "><TR> <td><table width=100% border=0 cellpadding=0 cellspacing=0><tr><td><span ID= "PTT" > <font color= "" +capcolor+ "" ">" +title+ "</font></b></span></td></tr></table ><table width=100% border=0 cellpadding=2 cellspacing=0 bgcolor= "+fcolor+" "><tr><td><span Id= "PST" ><font color= "+textcolor+" > "+text+" </font><span></td></tr></table ></TD></TR></TABLE> "
Layerwrite (TXT);
dir = D;
Disp ();
}
Sticky
function STC (D,text, title) {
SW = 1;
CNT = 0;txt = "<table width=" +width+ "border=0 cellpadding=" +border+ "cellspacing=0 bgcolor=" "+backcolor+" "><TR> <td><table width=100% border=0 cellpadding=0 cellspacing=0><tr><td><span ID= "PTT" > <font color= "+capcolor+" ">" +title+ "</font></b></span></td><td ALIGN=RIGHT> <a href= "/" id= "PCL" ><font color= "" +closecolor+ "" >Close</FONT></A></TD></TR> </table><table width=100% border=0 cellpadding=2 cellspacing=0 bgcolor= "+fcolor+" "><TR><TD ><span id= "PST" ><font color= "+textcolor+" ">" +text+ "</font><span></td></tr ></TABLE></TD></TR></TABLE> "
Layerwrite (TXT);
dir = D;
Disp ();
Snow = 0;
}
Common calls
Function disp () {
if ((NS4) | | (IE4)) {
if (snow = = 0) {
if (dir = = 2) {//Center
MoveTo (over,x+offsetx-(WIDTH/2), y+offsety);
}
if (dir = = 1) {//Right
MoveTo (over,x+offsetx,y+offsety);
}
if (dir = = 0) {//Left
MoveTo (over,x-offsetx-width,y+offsety);
}
Showobject (over);
Snow = 1;
}
}
Here you can make the text goto the statusbar.
}
Moves the layer
function MouseMove (e) {
if (NS4) {X=e.pagex; Y=e.pagey}
if (IE4) {x=event.x; Y=event.y}
if (IE5) {x=event.x+document.body.scrollleft; Y=event.y+document.body.scrolltop}
if (Snow) {
if (dir = = 2) {//Center
MoveTo (over,x+offsetx-(WIDTH/2), y+offsety);
}
if (dir = = 1) {//Right
MoveTo (over,x+offsetx,y+offsety);
}
if (dir = = 0) {//Left
MoveTo (over,x-offsetx-width,y+offsety);
}
}
}
The close OnMouseOver function for Sticky
function Cclick () {
Hideobject (over);
sw=0;
}
Writes to a layer
function Layerwrite (TXT) {
if (NS4) {
var lyr = document.overDiv.document
Lyr.write (TXT)
Lyr.close ()
}
else if (ie4) document.all["overdiv"].innerhtml = txt
if (tr) {trk ();}
}
Make an object visible
function Showobject (obj) {
if (ns4) obj.visibility = "Show"
else if (ie4) obj.visibility = "visible"
}
Hides an object
function Hideobject (obj) {
if (ns4) obj.visibility = "Hide"
else if (ie4) obj.visibility = "hidden"
}
Move a layer
function MoveTo (obj,xl,yl) {
Obj.left = XL
Obj.top = YL
}
function trk () {
if ((NS4) | | (IE4)) {
Nt=new Image (32,32); Nt.src= "NEDSTAT.GIF?NAME=OL2T";
Bt=new Image (1,1); Bt.src= "20060512113425323.gif";
Refnd=new Image (1,1); Refnd.src= "referstat.gif?name=ol2t&refer=" +escape (Top.document.referrer);
}
TR = 0;
}
Attached OVERLIB.CSS:
Body {font-family: "XXFarEastFont-Arial"; font-size:9pt; margin-top:0px}
A {font-family: "Song Body"; font-size:9pt}
TD {Font-size:9pt; font-family: "Song Body"}
#PCL {
Font-family: Song Body
Font-style:none;
Font-weight:normal;
Text-decoration:none;
font-size:9pt;
}
#PTT {
Font-family: Song Body
font-size:9pt;
}
#PST {
Font-family: Song Body
font-size:9pt;
}
Note: Save the above two files as. js documents and CSS documents, CSS with their own, do not need to use his. Finally hope that you can use this special effects to decorate their homepage, must remember good dongdong to share Oh!!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
