当前位置：Gxlcms > JavaScript > javascript支持IE和firefox(FF)的渐变透明效果

javascript支持IE和firefox(FF)的渐变透明效果

时间：2021-07-01 10:21:17 帮助过：3人阅读

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="随意的渐变">
 
效果 
检测Test是否隐藏 
<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需刷新才能执行]

javascript支持IE和firefox(FF)的渐变透明效果

人气教程排行