This article describes the method of JS+CSS to realize the gradient display of the DIV layer inducing the mouse. Share it for your reference. The specific implementation method is as follows:
Copy the code 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 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 document.getElementById(d);}
//Control div to display gradually
var i = 0;
function change_show(){
var obj = $("tip");
i=i+5; // Gradually display the speed
obj.style.filter = "Alpha(Opacity=" + i + ")"; //The transparency gradually becomes smaller
obj.style.opacity = 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
obj.style.filter = "Alpha(Opacity=" + j + ")"; //The transparency gradually 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>The mouse slides here, the div layer gradient display is displayed<br><hr> Collected on the Internet, only for interest and learning communication, and not for commercial purposes. </font></p>
</body>
</html>
I hope this article will be helpful to everyone's JavaScript programming.