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

更新时间：2008年10月10日 01:06:42 作者：

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> <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需再刷新一下页面才能执行]

您可能感兴趣的文章:

JavaScript数组合并的多种方法
这篇文章主要为大家详细介绍了JavaScript数组合并的多种方法，感兴趣的朋友可以参考一下
2016-05-05
微信小程序实现联动菜单
这篇文章主要为大家详细介绍了微信小程序实现联动菜单，左右侧菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
最近接了个项目，项目需求是这样的，当点击图片查看图片，再次点击大图被隐藏，在移动端用的比较多，因为移动端屏幕小，需要查看大图。具体代码实现过程本文给大家介绍，需要的朋友可以参考下
2015-11-11
JavaScript闭包原理与使用介绍
闭包是js的一个难点也是它的一个特色,是我们必须掌握的js高级特性,下面这篇文章主要给大家介绍了关于JavaScript闭包函数的相关资料,需要的朋友可以参考下
2022-10-10
Javascript中的apply()方法浅析
这篇文章主要介绍了Javascript中的apply()方法浅析,本文讲解了apply vs call、Javascript apply 方法等内容,需要的朋友可以参考下
2015-03-03
js数字计算误差问题的快速解决方法
下面小编就为大家带来一篇js数字计算误差问题的快速解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
JsRender for object语法简介
这篇文章主要介绍了JsRender for object语法,以实例形式讲述了for Object的用法,需要的朋友可以参考下
2014-10-10
前端微信H5公众号实现授权登录的方法总结
这篇文章主要介绍了如何在微信公众号中实现网页授权功能,包括创建微信服务公众号、配置重定向地址、调试和开发使用等步骤,文中通过图文及代码介绍的非常详细,需要的朋友可以参考下
2025-01-01
判断js对象是否拥有某一个属性的js代码
js对象是否拥有某一个属性的判断方法有很多，下面为大家介绍个比较实用的技巧，希望对大家有所帮助
2013-08-08
原生js代码实现图片放大境效果
今天小编给大家分享两种使用js写的图片放大镜效果，原理都差不多，都是采用了两张图片给两张图片设定相应的尺寸，最后显示在不同位置，最终实现放大效果，感兴趣的朋友一起看看吧
2016-10-10

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具