javascript支持IE和firefox(FF)的漸變透明效果

2019-11-21 01:36:24

字體：大中小

來源：轉載

供稿：網友

function Clear (DataType ,DataThis, DataTime, DataInterval)
DataType 布爾值 - - 是否隱藏或顯示
DataThis 元素 - - 被操作元素
DataTime 數字 - - 發生漸變時間
DataInterva 數字 - - 漸變刷新間隔

以下是HTML網頁特效代碼，

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>漸變</title> </head> <body> <input onClick="SmallWay.Clear(true, Test, 2000, 10)" type="button" value="慢漸變出現"> <input onClick="SmallWay.Clear(false, Test, 2000, 10)" type="button" value="慢漸變隱藏"> <input onClick="SmallWay.Clear(true, Test, 500, 10)" type="button" value="快漸變出現"> <input onClick="SmallWay.Clear(false, Test, 500, 10)" type="button" value="快漸變隱藏"> <input onClick="SmallWay.Clear(Math.random() > 0.5, Test, parseInt(Math.random() * 2000), 10)" type="button" value="隨意的漸變"> <div align="center" Id="Test" style="width:100px;height:100px;background:#000000;color:#FF0000;">效果</div> <div   class="iwvjtn8m0"   id="Div">檢測Test是否隱藏</div> <script language="javascript"> var Test = document.getElementById('Test') </script> <script language="javascript"> var SmallWay = {} SmallWay.Clear = function(DataType ,DataThis, DataTime, DataInterval){ var HaShowId = parseInt(Math.random() * 10000000) DataThis.setAttribute("SmallWay_Show_Id", HaShowId) var HaInterval = ( !isNaN(DataInterval) ) ? parseInt(DataInterval) : 10 var HaTime = ( !isNaN(DataTime) ) ? parseInt(DataTime) : 1000 var HaOpacity = DataThis.getAttribute("SmallWay_Show_OpacityId") if ( HaOpacity == null ) { HaOpacity = ( DataThis.style.display != "none" ) ? 100 : 0 DataThis.style.filter = "Alpha(Opacity=" + HaOpacity + ")" DataThis.style.cssText = DataThis.style.cssText.replace(/;-moz-opacity:.*?;/gi, "") + ";-moz-opacity:" + (HaOpacity / 100) } HaOpacity = ( DataThis.style.display != "none" ) ? HaOpacity : 0 HaOpacity = ( !isNaN(HaOpacity) ) ? (HaTime / HaInterval) * (parseInt(HaOpacity) / 100) : 0 eval("SmallWay.ThisData_" + HaShowId + " = DataThis") if ( DataType ) { DataThis.style.display = "block" for ( var i = HaOpacity; i <= HaTime / HaInterval; i++ ){ window.setTimeout( "" + "var HaThis = SmallWay.ThisData_" + HaShowId + "/n" + "if ( HaThis != null ) {/n" + "if ( HaThis.getAttribute(/"SmallWay_Show_Id/") == /"" + HaShowId + "/" ) {/n" + "HaThis.style.filter = /"Alpha(Opacity=" + (100 / (HaTime / HaInterval) * i) + ")/"/n" + "HaThis.style.cssText = HaThis.style.cssText.replace(/;-moz-opacity:.*?;/gi, /"/") + /";-moz-opacity:" + (1 / (HaTime / HaInterval) * i) + "/"/n" + "HaThis.setAttribute(/"SmallWay_Show_OpacityId/", " + (100 / (HaTime / HaInterval) * i) + ")/n" + "}/n" + "}/n" , HaInterval * (i - HaOpacity)) } window.setTimeout( "" + "SmallWay.ThisData_" + HaShowId + " = null/n" + "delete SmallWay.ThisData_" + HaShowId + "/n" , HaInterval * (i - HaOpacity)) }else{ for ( var i = HaOpacity; i >= 0; i-- ){ window.setTimeout( "" + "var HaThis = SmallWay.ThisData_" + HaShowId + "/n" + "if ( HaThis != null ) {/n" + "if ( HaThis.getAttribute(/"SmallWay_Show_Id/") == /"" + HaShowId + "/" ) {/n" + "HaThis.style.filter = /"Alpha(Opacity=" + (100 / (HaTime / HaInterval) * i) + ")/"/n" + "HaThis.style.cssText = HaThis.style.cssText.replace(/;-moz-opacity:.*?;/gi, /"/") + /";-moz-opacity:" + (1 / (HaTime / HaInterval) * i) + "/"/n" + "HaThis.setAttribute(/"SmallWay_Show_OpacityId/", " + (100 / (HaTime / HaInterval) * i) + ")/n" + "}/n" + "}/n" , (HaOpacity - i) * HaInterval) } window.setTimeout( "" + "var HaThis = SmallWay.ThisData_" + HaShowId + "/n" + "if ( HaThis != null ) {/n" + "if ( HaThis.getAttribute(/"SmallWay_Show_Id/") == /"" + HaShowId + "/" ) {/n" + "HaThis.style.display = /"none/"" + "}/n" + "}/n" + "SmallWay.ThisData_" + HaShowId + " = null/n" + "delete SmallWay.ThisData_" + HaShowId + "/n" , (HaOpacity - i) * HaInterval) } } </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：js之完全兼容ie與firefox的拖動層代碼[測試好用]

下一篇：常用JS加密編碼算法代碼第1/2頁