HTML渐变效果-优快云博客

本文链接：https://blog.youkuaiyun.com/freejs/article/details/3043823

本文介绍了一个使用HTML和JavaScript实现的元素渐变显示和隐藏的效果。通过设置不同的时间和间隔参数，可以控制元素渐变的速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DataThis可以发送任何标签，这个标签没有ID也可以，因为用的是自定义属性。
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>
function Clear (DataType ,DataThis, DataTime, DataInterval)<br>
DataType 布尔值 - - 是否隐藏或显示<br>
DataThis 元素 - - 被操作元素<br>
DataTime 数字 - - 发生渐变时间<br>
DataInterva 数字 - - 渐变刷新间隔<br>
<input onClick="SmallWay.Clear(true, Test, 2000, 10)" type="button" value="慢渐变出现">
<input onClick="SmallWay.Clear(false, Test, 2000, 10)" type="button" value="慢渐变隐藏"><br>
<input onClick="SmallWay.Clear(true, Test, 500, 10)" type="button" value="快渐变出现">
<input onClick="SmallWay.Clear(false, Test, 500, 10)" type="button" value="快渐变隐藏"><br>
<input onClick="SmallWay.Clear(Math.random() > 0.5, Test, parseInt(Math.random() * 2000), 10)" type="button" value="随意的渐变"><br>
<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>

支持FF的渐变透明效果