Often see the page in the picture gradient display, write one yourself.
The principle is very simple is to modify the elements of CSS transparency.
Online Preview Effect: http://jsfiddle.net/dtdxrk/BHUp9/embedded/result/
Copy Code code as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Native JS element fade/Fade method </title>
<body>
<button id= "Show" > Fade </button>
<button id= "Hiden" > Fade </button>
<script type= "Text/javascript" >
function Alphaplay (obj,method) {//method has two values show or Hiden
var n = (method = = "Show")? 0:100,
ie = (window. ActiveXObject)? True:false;
var time = setinterval (function () {
if (method = = "Show") {
if (n < 100) {
n+=10;
if (IE) {
Obj.style.cssText = "Filter:alpha (opacity=" +n+ ")";
}else{
(n==100)? obj.style.opacity = 1:obj.style.opacity = "0." +n;
}
}else{
Cleartimeout (time);
}
}else{
if (n > 0) {
n-=10;
if (IE) {
Obj.style.cssText = "Filter:alpha (opacity=" +n+ ")";
}else{
Obj.style.opacity = "0." +n;
}
}else{
Cleartimeout (time);
}
}
},30);
}
var img = document.getElementById ("img");
document.getElementById ("show"). onclick = function () {
Alphaplay (IMG, "show");
}
document.getElementById ("Hiden"). onclick = function () {
Alphaplay (IMG, "Hiden");
}
</script>
</body>
