This article illustrates the method of js+css realization of the DIV layer in the sensor mouse gradient display. Share to everyone for your reference. The implementation methods are as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<TITLE>JS+CSS implementation of the induction mouse gradient display div layer </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" >
<!--
Defines the "Get specified DOM node" function because of its high reuse rate
function $ (d) {return document.getElementById (d);}
Control Div gradually show
var i = 0;
function Change_show () {
var obj = $ ("Tip");
i=i+5; Show Speed gradually
Obj.style.filter = "Alpha (opacity=" + i + ")"; Transparency gradually becomes smaller
obj.style.opacity = i/100; Compatible Firefox
if (i>=100) {
Clearinterval (s);
i=0;
}
}
Control Div gradually disappear
var j = 100;
function Change_hidden () {
var obj = $ ("Tip");
j=j-5; Gradually disappearing speed
Obj.style.filter = "Alpha (opacity=" + j + ")"; Transparency is getting bigger
obj.style.opacity = j/100; Compatible 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>
<body>
<div id= "Tip" style= "background-color:blue;width:48%;height:48%;" onmouseover= "show (This);" Onmouseout= "Hidden ( this); " >
</div>
<br/>
<br> mouse over here, div layer gradient display <br></body>
I hope this article will help you with your JavaScript programming.
