javascript支持IE和firefox(FF)的渐变透明效果_javascript技巧-js教程-PHP中文网

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> 
<script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="http://www.2018haoyunlai.com/from/188bet.php" ><img width="120px" height="600px" src="http://www.2018haoyunlai.com/images/188_120.gif"></a></div></div> <div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="http://www.2018haoyunlai.com/from/manbetx.php"><img width="120px" height="600px" src="http://www.2018haoyunlai.com/images/wb600.gif"></a> </div></div> 
<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>

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

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

专题推荐：ie firefox 渐变透明

上一篇：js在不刷新的情况下动态添加表格行[脚本之家强烈推荐]_表单特效下一篇：自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

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

相关文章推荐

相关课程推荐

独孤九贱(3)_JavaScript视频教程

独孤九贱(6)_jQuery视频教程

jQuery与Ajax基础与实战

Git教程(60分钟全程无废话版)

PHP中文网