JS + CSS: How to show the DIV layer with a gradual mouse gradient, cssdiv
This article describes how to use JS + CSS to display the DIV layer with a gradient sensor mouse. Share it with you for your reference. The specific implementation method is as follows:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> DIV layer for JS + CSS-implemented inductive mouse gradient display </title>
<Style>
# Tip {
Position: absolute;
Left: 90px;
Width: 0px;
Height: 0px;
Color: # FFF;
Font-size: 12px;
Background-color: #000;
Border: 1px solid # DEF;
Filter: Alpha (Opacity = 0 );
Opacity: 0;
Z-index: 999;
}
</Style>
<Script type = "text/javascript">
<! --
// Define the function "Get the specified dom node" because of its high Reuse Rate
Function $ (d) {return document. getElementById (d );}
// Control the gradual display of div
Var I = 0;
Function change_show (){
Var obj = $ ("tip ");
I = I + 5; // display speed gradually
Obj. style. filter = "Alpha (Opacity =" + I + ")"; // The transparency gradually decreases
Obj. style. opacity = I/100; // compatible with FireFox
If (I> = 100 ){
ClearInterval (s );
I = 0;
}
}
// The Control div disappears gradually
Var j = 100;
Function change_hidden (){
Var obj = $ ("tip ");
J = J-5; // gradual disappearance speed
Obj. style. filter = "Alpha (Opacity =" + j + ")"; // The transparency increases.
Obj. style. opacity = j/100; // compatible with FireFox
If (j <= 0 ){
ClearInterval (h );
// Obj. style. display = "none ";
J = 100;
}
}
// Control change_show () behavior
Var s;
Function show (x ){
If (s) {clearInterval (s );}
$ ("Tip"). style. display = "block ";
S = setInterval (change_show, 1 );
}
// Control change_hidden () behavior
Function hidden (x ){
$ ("Tip"). innerHTML = "";
H = setInterval (change_hidden, 1 );
}
// -->
</Script>
</Head>
<Body>
<Div id = "tip" style = "background-color: blue; width: 48%; height: 48%;" onmouseover = "show (this ); "onmouseout =" hidden (this); ">
</Div>
<Br/>
<Br> move the mouse over here, and the div layer gradient display <br> </Body>
</Html>
I hope this article will help you design javascript programs.