<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<title>DiV layer implemented by JS+CSS to sense the gradient display of mouse</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 to "get the specified dom node" because its reuse rate is high
function $(d){return (d);}
//Control div to display gradually
var i = 0;
function change_show(){
var obj = $("tip");
i=i+5; // Gradually display the speed
= "Alpha(Opacity=" + i + ")"; //The transparency gradually decreases
= i/100; //Compatible with FireFox
if(i>=100){
clearInterval(s);
i=0;
}
}
//Control div gradually disappears
var j = 100;
function change_hidden(){
var obj = $("tip");
j=j-5; //Gradually disappear speed
= "Alpha(Opacity=" + j + ")"; //The transparency gradually increases
= j/100; //Compatible with FireFox
if(j<=0){
clearInterval(h);
//="none";
j=100;
}
}
//Control change_show() behavior
var s;
function show(x){
if(s){clearInterval(s);}
$("tip").="block";
s = setInterval(change_show,1);
}
//Control change_hidden() behavior
function hidden(x){
$("tip").innerHTML="";
h = setInterval(change_hidden,1);
}
//-->
</script>
</head>
<body>
<div style="background-color:blue;width:48%;height:48%;" onmouseover="show(this);" onmouseout="hidden(this);">
</div>
<br />
<br>The mouse slides here, the div layer gradient display is collected on the Internet, only for interest and learning communication, and is not for commercial purposes. </font></p>
</body>
</html>
<html xmlns="http:///1999/xhtml">
<head>
<title>DiV layer implemented by JS+CSS to sense the gradient display of mouse</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 to "get the specified dom node" because its reuse rate is high
function $(d){return (d);}
//Control div to display gradually
var i = 0;
function change_show(){
var obj = $("tip");
i=i+5; // Gradually display the speed
= "Alpha(Opacity=" + i + ")"; //The transparency gradually decreases
= i/100; //Compatible with FireFox
if(i>=100){
clearInterval(s);
i=0;
}
}
//Control div gradually disappears
var j = 100;
function change_hidden(){
var obj = $("tip");
j=j-5; //Gradually disappear speed
= "Alpha(Opacity=" + j + ")"; //The transparency gradually increases
= j/100; //Compatible with FireFox
if(j<=0){
clearInterval(h);
//="none";
j=100;
}
}
//Control change_show() behavior
var s;
function show(x){
if(s){clearInterval(s);}
$("tip").="block";
s = setInterval(change_show,1);
}
//Control change_hidden() behavior
function hidden(x){
$("tip").innerHTML="";
h = setInterval(change_hidden,1);
}
//-->
</script>
</head>
<body>
<div style="background-color:blue;width:48%;height:48%;" onmouseover="show(this);" onmouseout="hidden(this);">
</div>
<br />
<br>The mouse slides here, the div layer gradient display is collected on the Internet, only for interest and learning communication, and is not for commercial purposes. </font></p>
</body>
</html>