JS set the function properties of DOM node transparency: filter= "alpha (opacity=" + value+ ")" ( compatible with IE) and opacity=value/100 ( FF and GG compatible).
Let's take a look at the compatibility code for setting transparency:
function setopacity (Ele, opacity) { if (ele.style.opacity! = undefined) {/// Compatible with FF and GG and new version ie ele.style.opacity =opacity/100 ; Else { ///compatible with old version ie ele.style.filter = "Alpha (opacity=" + opacity + ")"; } }
About some of the small partners write this:
function setopacity (Ele, opacity) { if (document.all) { ////compatible with IE Ele.style.filter = "Alpha (opacity=" + opacity + ")"; } ele { ///compatible with FF and GG ele.style.opacity = opacity/100; }}
I want to say that in the IE10 under the operation of a problem, after the point did not respond. This method is not desirable because IE10 supports the Opacity property, which does not support filter.
Fadein function Code:
functionFadein (ele, opacity, speed) {if(ele) {varv = ele.style.filter.replace ("Alpha (opacity=", ""). Replace (")", "") | |ele.style.opacity; V< 1 && (v = v * 100); varCount = speed/1000; varAvg = Count < 2? (Opacity/count): (opacity/count-1); varTimer =NULL; Timer= SetInterval (function() { if(V <opacity) {v+=avg; SetOpacity (Ele, v); } Else{clearinterval (timer); } }, 500); }}
fadeout function Code:
functionfadeout (ele, opacity, speed) {if(ele) {varv = ele.style.filter.replace ("Alpha (opacity=", ""). Replace (")", "") | | ele.style.opacity | | 100; V< 1 && (v = v * 100); varCount = speed/1000; varAvg = (100-opacity)/count; varTimer =NULL; Timer= SetInterval (function() { if(V-avg >opacity) {v-=avg; SetOpacity (Ele, v); } Else{clearinterval (timer); } }, 500); }}
Here's a demo example:
<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title></title><Scripttype= "Text/javascript"src= "Fade.js"></Script> <Scripttype= "Text/javascript">window.onload= function() {document.getElementById ('Button1'). onclick= function() {fadeout (document.getElementById ('DV'), 0, 6000); } document.getElementById ('Button2'). onclick= function() {Fadein (document.getElementById ('DV'), the, 6000); } } </Script></Head><Body> <DivID= "DV"style= "background-color:green; width:400px; height:400px;"></Div> <inputID= "Button1"type= "button"value= "button" /> <inputID= "Button2"type= "button"value= "button" /></Body></HTML>
What better way to achieve a message ...