软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：ie,firefox,渐变透明

<!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 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>

技术文章快速查找

10个很棒的jQuery代码片段

JavaScript Event学习第七章事件属性

支持IE和firefox的js代码美化加亮源码

{}与function(){}选用空对象{}来存放keyValue

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建