I often see the gradient display of images on the webpage and write one by myself.
The principle is to modify the css transparency of an element.
Online Preview effect: http://jsfiddle.net/dtdxrk/BHUp9/embedded/result/
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> native Js element gradient/gradient method </title>
</Head>
<Body>
<Button id = "show"> fade-in </button>
<Button id = "hiden"> fade away </button>
<Script type = "text/javascript">
Function alphaPlay (obj, method) {// method has two values: show or hiden.
Var n = (method = "show ")? Zero: 100,
Ie = (window. ActiveXObject )? True: false;
Var time = setInterval (function (){
If (method = "show "){
If (n <100 ){
N + = 10;
If (ie ){
Obj.style.css Text = "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.css Text = "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>
</Html>