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

function Clear (DataType ,DataThis, DataTime, DataInterval)
DataType 布尔值 - - 是否隐藏或显示
DataThis 元素 - - 被操作元素
DataTime 数字 - - 发生渐变时间
DataInterva 数字 - - 渐变刷新间隔

以下是HTML网页特效代码,

渐变

0.5, Test, parseInt(Math.random() * 2000), 10)" type="button" value="随意的渐变">

效果

检测Test是否隐藏

var Test = document.getElementById('Test')

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 = 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)

}
}

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

(0)

相关推荐

  • js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)

    本文实例介绍了js实现图片轮播相册,具有过渡渐变效果,分享给大家供大家参考,具体内容如下 思路很简单,用2个属性保存当前图片和上一张图片,用2个定时器分别控制透明度和当前过渡的图片. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <style> #cnt{width:100%;height:80%;} .ctrl{text-align:center;border:1px solid gray;font-s

  • 利用递增的数字返回循环渐变的颜色的js代码

    函数如下: 复制代码 代码如下: function gCL(i){ var f=parseInt((i%15)/5); i=i%15%5; switch(f){ case 0:return "#"+cS2(255-i*51)+cS2(i*51)+"00"; case 1:return "#00"+cS2(255-i*51)+cS2(i*51); case 2:return "#"+cS2(i*51)+"00"

  • 神奇!js+CSS+DIV实现文字颜色渐变效果

    本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果,供大家参考,具体内容如下 下面是 CSS 部分代码: <!--CSS代码开始--> body{ font:12px/1.5 Microsoft Yahei; } h3{ padding:10px; margin:0; background-color:#999; color:#fff; font:16px/1.5 Microsoft Yahei; text-align:center; } .box{ position:relati

  • javascript 线性渐变二

    先来IE的,这是最大的用户群,如果这部分开发不出来,基本可以说不用做了.IE虽然有Gradient滤镜,但对比其他浏览器的实现特弱,没有多重渐变(stop-color),不能实现角度渐变,而且还经常失效.我的思路是这样,假如有一个带文本的DIV,要实现多重线性渐变,我们首先得把它里面的文本取出来,然后里面放几个DIV,有几重就放几个,然后把它们渐变.如果是垂直渐变,这好办,什么也不用做,只需设置其滤镜与各个高就行了.如果水平,就让其浮动或绝对定位,放到适当的位置,设置其滤镜与宽.但渐变滤镜竟然会

  • JS Tween 颜色渐变

    有31中缓动算法,实现了颜色的自动转换(#f00 #ff0000 rgb(255,0,0)格式到颜色运算格式,最后返回#ff0000格式).px单位的自动转换. 调用接口: /** * 对外接口 * Tween的示例 * @param startProps 开始属性,单个属性或者数组 * @param endProps 结束属性,单个属性或者数组 * @param timeSeconds 运动消耗时间,单位秒 * @param animType 动作类型,字符串型,内部自己转换算子 * @par

  • JavaScript 渐变效果页面图片控制第1/2页

    使用该程序能实现很多常见的动画特效,包括大小变换.位置变换.渐显渐隐等等. 程序说明: 渐变效果的原理就是利用定时器不断设置值,如果要减速效果就设置一个步长(详细看JavaScript 弹簧效果) . 这里只是把能渐变的属性(透明度.宽.高.left.top)整合在一起,使用相同的渐变级数(Step)使渐变同步,形成多个属性同时渐变的效果. 下面说说有用的地方: [最终样式] 在JavaScript 图片切割效果的边宽获取中也说到了最终样式,在使用offset获取的数据设置宽度高度的时候,必须先

  • 纯js和css实现渐变色包括静态渐变和动态渐变

    说起"渐变色",你会想起什么? 当我开始搜索查找这个名词的时候,才发现它实际上是有两种理解或者说是两种形式的:动态渐变和静态渐变. 所谓动态渐变,举个简单的例子:他来了,她的脸渐渐红了...渐渐的,渐渐改变的,是不断在改变的:而静态渐变,也就更简单了:天上一到彩虹,赤橙黄绿青蓝紫啊...在当前展示的成品中,颜色从一部分到另一部分的颜色是不一样的,可能幅度比较小,是逐渐改变的,但有一点是至关重要的,它已经存在了,形成了变化的现状且无法再改变. 这样我们先来用javascript实现一下所

  • javascript渐变显示的雅虎中国选项卡效果代码

    y body { margin: 0; text-align: center; font-size: 12px; } .papanel, .pabd, .paft, .patop {width: 348px;} .papanel { background: #a5d0fd url("/article/upimages/pabg.gif") repeat-x; border-left: 1px solid #7bbdff; border-right: 1px solid #7bbdff;

  • 漂亮! js实现颜色渐变效果

    今天做组织机构,要分级别显示颜色,自己计算半天也没算出颜色渐变的方法,出来总是花里胡哨的难看的不要不要的,所以查了一下,找到一个js代码,试了试,很完美哦! <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script src

  • javascript简易动画类(div渐变)

    程序源码 复制代码 代码如下: function Animate(el, prop, opts) { this.el = el; this.prop = prop; this.from = opts.from; this.to = opts.to; this.time = opts.time; this.callback = opts.callback; this.animDiff = this.to - this.from; } Animate.prototype._setStyle = fu

随机推荐