JS Mouse movement in title show the effect of the picture code _ image effects

1.js Code

Copy Code code as follows:

Default setting definition. *********************
tpopwait=50;//stay twait seconds after the prompt display.
tpopshow=5000;//displays tshow seconds after the prompt closes
showpopstep=20;
popopacity=99;

Internal variable definition *****************
Spop=null;
Curshow=null;
Tfadeout=null;
Tfadein=null;
Tfadewaiting=null;

document.write ("<style type= ' text/css ' id= ' Defaultpopstyle ' >");
document.write (". cpoptext {line-break:normal;word-break:break-all; Background-color: #FEFCF3; color: #000000; border:1px #E7B68C solid;padding-top:2px; padding-right:4px; padding-left:4px; padding-bottom:2px;font-size:12px;width:468px; Filter:alpha (opacity=0)} ");
document.write ("</style>");
document.write ("<div id= ' dypoplayer ' style= ' position:absolute;z-index:1000; ' class= ' CPopText '" ></div> ") );


function Showpopuptext () {
var o=event.srcelement;
Mousex=event.x;
Mousey=event.y;
if (o.alt!=null && o.alt!= "") {o.dypop=o.alt;o.alt= ""};
if (o.title!=null && o.title!= "") {o.dypop=o.title;o.title= ""};
if (O.dypop!=spop) {
Spop=o.dypop;
Cleartimeout (curshow);
Cleartimeout (tfadeout);
Cleartimeout (Tfadein);
Cleartimeout (tfadewaiting);
if (Spop==null | | spop== "") {
Dypoplayer.innerhtml= "";
Dypoplayer.style.filter= "Alpha ()";
dypoplayer.filters.alpha.opacity=0;
}
else {
if (o.dyclass!=null) Popstyle=o.dyclass
else popstyle= "Cpoptext";
Curshow=settimeout ("Showit ()", tpopwait);
}

}
}

function Showit () {
Dypoplayer.classname=popstyle;
Dypoplayer.innerhtml=spop;
Popwidth=dypoplayer.clientwidth;
Popheight=dypoplayer.clientheight;
if (mousex+12+popwidth>document.body.clientwidth) popleftadjust=-popwidth-24
else popleftadjust=0;
if (mousey+12+popheight>document.body.clientheight) poptopadjust=-popheight-24
else poptopadjust=0;

Dypoplayer.style.left=mousex+12+document.body.scrollleft+popleftadjust;
Dypoplayer.style.top=mousey+12+document.body.scrolltop+poptopadjust;
Dypoplayer.style.filter= "Alpha (opacity=0)";
Fadeout ();
}

function fadeout () {
if (dypoplayer.filters.alpha.opacity<popopacity) {
Dypoplayer.filters.alpha.opacity+=showpopstep;
Tfadeout=settimeout ("fadeout ()", 1);
}
else {
dypoplayer.filters.alpha.opacity=popopacity;
Tfadewaiting=settimeout ("FadeIn ()", tpopshow);
}
}

function FadeIn () {
if (dypoplayer.filters.alpha.opacity>0) {
Dypoplayer.filters.alpha.opacity-=1;
Tfadein=settimeout ("FadeIn ()", 1);
}
}
Document.onmouseover=showpopuptext;

2.html Code contains JS code, use the example
Look at the test code given by the cloud-dwelling community.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> Untitled document </title> <script type=" Text/javascript ">//*********** default setting Definition. * * tpopwait=50;//stay twait seconds after the prompt display. tpopshow=5000;//display tshow seconds after the prompt to close showpopstep=20; popopacity=99; Internal variable definition ***************** spop=null; Curshow=null; Tfadeout=null; Tfadein=null; Tfadewaiting=null; document.write ("<style type= ' text/css ' id= ' Defaultpopstyle ' >"); document.write (". cpoptext {line-break:normal;word-break:break-all; Background-color: #FEFCF3; color: #000000; border:1px #E7B68C solid;padding-top:2px; padding-right:4px; padding-left:4px; padding-bottom:2px;font-size:12px;width:468px; Filter:alpha (opacity=0)} "); document.write ("</style>"); Document.wRite ("<div id= ' dypoplayer ' class= ' Cpoptext ' ></div>"); function Showpopuptext () {var o=event.srcelement; Mousex=event.x; Mousey=event.y; if (o.alt!=null && o.alt!= "") {o.dypop=o.alt;o.alt= ""}; if (o.title!=null && o.title!= "") {o.dypop=o.title;o.title= ""}; if (o.dypop!=spop) {spop=o.dypop; Cleartimeout (curshow); Cleartimeout (tfadeout); Cleartimeout (Tfadein); Cleartimeout (tfadewaiting); if (Spop==null | | spop== "") {dypoplayer.innerhtml= ""; Dypoplayer.style.filter= "Alpha ()"; dypoplayer.filters.alpha.opacity=0; else {if (o.dyclass!=null) Popstyle=o.dyclass else popstyle= "Cpoptext "; Curshow=settimeout ("Showit ()", tpopwait); }} function Showit () {dypoplayer.classname=popstyle; Dypoplayer.innerhtml=spop; Popwidth=dypoplayer.clientwidth; Popheight=dypoplayer.clientheight; if (mousex+12+popwidth>document.body.clientwidth) popleftadjust=-popwidth-24 else popleftadjust=0; if (mousey+12+popheight>document.body.clientheight) poptopadjust=-popheight-24 else popTopAdjust=0; Dypoplayer.style.left=mousex+12+document.body.scrollleft+popleftadjust; Dypoplayer.style.top=mousey+12+document.body.scrolltop+poptopadjust; Dypoplayer.style.filter= "Alpha (opacity=0)"; Fadeout (); function fadeout () {if (dypoplayer.filters.alpha.opacity<popopacity) {dypopLayer.filters.Alpha.opacit Y+=showpopstep; Tfadeout=settimeout ("fadeout ()", 1); else {dypoplayer.filters.alpha.opacity=popopacity; Tfadewaiting=settimeout ("FadeIn ()", tpopshow); }} function FadeIn () {if (Dypoplayer.filTers. alpha.opacity>0) {dypoplayer.filters.alpha.opacity-=1; Tfadein=settimeout ("FadeIn ()", 1); }} Document.onmouseover=showpopuptext; </script> </pead> <body> Cloud Community Testing Center, testing the code. There should be no problem in theory <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> "> Big  " > Small </body > </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]