首页
网页特效库
网页特效库
导航菜单
按钮表单
背景特效
时间日期
图片特效
鼠标特效
文本操作
窗口页面
状态栏类
警告对话
综合应用
游戏娱乐
首页
>
特效
>
综合应用
> 正文
漂亮的触发行变色代码
2009-12-24 综合应用 190℃
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- DW6 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2313" /> <title>www.zlcool.com</title> <style type="text/css"> /* <![CDATA[ */ div{margin:1px; vertical-align:middle;} .FadeId18Class { color:white; } .FadeId18OverClass { color:#D369A4; } /* ]]> */ </style> </head> <body> <table border="0" align="center" cellpadding="4" cellspacing="4" id="Container"> <tr align="center" valign="middle"> <td valign="middle"> <div id="FadeId1" style="width:100px; height:100px;">www.zlcool.com </div> </td> <td> <div id="FadeId2" style="width:100px; height:100px;">www.zlcool.com </div> </td> <td> <div id="FadeId3" style="width:100px; height:100px;">www.zlcool.com </div> </td> <td> <div id="FadeId4" style="width:100px; height:100px;">www.zlcool.com </div> </td> <td> <div id="FadeId5" style="width:100px; height:100px;">www.zlcool.com </div> </td> </tr> <tr align="center" valign="middle"> <td> <div id="FadeId6" style="width:100px; height:100px;">www.zlcool.com </div> </td> <td> <div id="FadeId7" style="width:100px; height:100px;">www.zlcool.com </div> </td> <td> <div id="FadeId8" style="width:100px; height:100px;">www.zlcool.com </div> </td> <td> <div id="FadeId9" style="width:100px; height:100px;">www.zlcool.com </div> </td> <td> <div id="FadeId10" style="width:100px; height:100px;">www.zlcool.com </div> </td> </tr> <tr align="center" valign="middle"> <td> <div id="FadeId11" style="width:100px; height:100px;">www.zlcool.com </div> </td> <td> <div id="FadeId12" style="width:100px; height:100px;"> <a target="_blank" href="http://www.zlcool.com/bbs">www.zlcool.com</a> </div> </td> <td> <div id="FadeId13" style="width:100px; height:100px;">www.zlcool.com </div> </td> <td> <div id="FadeId14" style="width:100px; height:100px;">www.zlcool.com </div> </td> <td> <div id="FadeId15" style="width:100px; height:100px;">www.zlcool.com </div> </td> </tr> </table> <script type="text/javascript"> function Faded() { var Au = {}; var This = this; var Param = {}; var PVar = {}; this.Get = {}; this.Get.Au = fGetAu; this.Set = {}; this.Debug = false; this.TagSpliter = "->"; this.Element = {}; this.Element.Set = []; this.Element.Add = function(sId, sOriginColor, sOverColor, sOutColor, iTime, iIntervalMs, bCompColor, sClassName, sOverClassName) { __Faded_AddElement (sId, sOriginColor, sOverColor, sOutColor, iTime, iIntervalMs, bCompColor, sClassName, sOverClassName, This) }; this.Element.BatchAdd = function(Main, sChildTag, ArOriColor, ArOverColor, ArOutColor, iTime, iIntervalMs, bCompColor, sClassName, sOverClassName) { Main = fSetObject(Main, "Faded Batch Main is null!"); sChildTag = sChildTag.toUpperCase(); var EleAr = []; var TagAr = sChildTag.split(This.TagSpliter); EleAr = fGetDeepTag(Main, TagAr); if(ArOriColor.length===1) { ArOriColor.push(ArOriColor[0]); } if(ArOverColor.length===1) { ArOverColor.push(ArOverColor[0]); } if(typeof(ArOutColor)=="boolean"||ArOutColor.constructor==Boolean) { ArOutColor = [ArOutColor]; } if(ArOutColor.length===1) { ArOutColor.push(ArOutColor[0]); } for(var i=0, j=EleAr.length; i<j; i++) { if(i%2===0) { Fade.Element.Add ( EleAr[i] , ArOriColor[0] , ArOverColor[0] , ArOutColor[0] ,iTime , iIntervalMs , bCompColor , sClassName , sOverClassName ); } else { Fade.Element.Add ( EleAr[i] , ArOriColor[1] , ArOverColor[1] , ArOutColor[1] ,iTime , iIntervalMs , bCompColor , sClassName , sOverClassName ); } } } this.Go = fGo; function fGo(fIniter) { if(fIsFunc(fIniter)) fIniter(Param); for(var i = 0, j=This.Element.Set.length; i<j; i++) { var TempObj = This.Element.Set[i]; TempObj.style.backgroundColor = TempObj["Extend"]["OriginalColor"]; TempObj["Interval"] = {}; if(TempObj["Extend"]["CompColor"]) { TempObj.style.color = fGetCompColor(TempObj["Extend"]["OriginalColor"]); } if(TempObj["Extend"]["ClassName"]!="") { TempObj.className = TempObj["Extend"]["ClassName"]; } TempObj.onmouseover = fOnMouseOver; TempObj.onmouseout = fOnMouseOut; } } function fOnMouseOut() { try { clearInterval(this["Interval"]["Over"]["Go"]); } catch(e) { } this["Interval"]["Out"] ={} this["Interval"]["Out"]["Count"] = 0; if(this["Extend"]["ClassName"]!="") { this.className = this["Extend"]["ClassName"]; } var BgColor = this.style.backgroundColor==""?"#ffffff":this.style.backgroundColor; if(/rgb\(/i.test(BgColor)) { BgColor = fRgbToHex(BgColor); } this["Interval"]["Out"]["FadeArray"] = __Faded_Fade ( BgColor, this["Extend"]["OutColor"], this["Extend"]["Time"], false, true ); var me = this; this["Interval"]["Out"]["Go"] = setInterval ( function() { if(me["Interval"]["Out"]["Count"]>=me["Interval"]["Out"]["FadeArray"].length) { clearInterval(me["Interval"]["Out"]["Go"]); me["Interval"]["Out"]["Count"] = null; return; } var sBgColor = me["Interval"]["Out"]["FadeArray"][me["Interval"]["Out"]["Count"]]; me.style.backgroundColor = sBgColor; if(me["Extend"]["CompColor"]) { me.style.color = fGetCompColor(sBgColor); } if(This.Debug) defaultStatus = me["Interval"]["Out"]["Count"]; me["Interval"]["Out"]["Count"]++; } , me["Extend"]["IntervalMs"] ) // www.zlcool.com } function fOnMouseOver() { try { clearInterval(this["Interval"]["Out"]["Go"]); } catch(e) { } this["Interval"]["Over"] ={} this["Interval"]["Over"]["Count"] = 0; if(this["Extend"]["OverClassName"]!="") { this.className = this["Extend"]["OverClassName"]; } var BgColor = this.style.backgroundColor==""?"#ffffff":this.style.backgroundColor; if(/rgb\(/i.test(BgColor)) { BgColor = fRgbToHex(BgColor); } this["Interval"]["Over"]["FadeArray"] = __Faded_Fade ( BgColor, this["Extend"]["MoveColor"], this["Extend"]["Time"], false, true ); var me = this; this["Interval"]["Over"]["Go"] = setInterval ( function() { if(me["Interval"]["Over"]["Count"]>=me["Interval"]["Over"]["FadeArray"].length) { clearInterval(me["Interval"]["Over"]["Go"]); me["Interval"]["Over"]["Count"] = null; return; } var sBgColor = me["Interval"]["Over"]["FadeArray"][me["Interval"]["Over"]["Count"]]; me.style.backgroundColor = sBgColor; if(me["Extend"]["CompColor"]) { me.style.color = fGetCompColor(sBgColor); } if(This.Debug) defaultStatus = me["Interval"]["Over"]["Count"]; me["Interval"]["Over"]["Count"]++; } , me["Extend"]["IntervalMs"] ) } function fGetAu(){ return Au; } } function __Faded_AddElement (sId, sOriginColor, sOverColor, sOutColor, iTime, iIntervalMs, bCompColor, sClassName, sOverClassName, oFaded) { var Obj = fSetObject(sId); if(!bCompColor) bCompColor = false; else bCompColor = true; if(!sClassName) sClassName = ""; if(!sOverClassName) sOverClassName = ""; if(!sOriginColor) { sOriginColor = fGetStyle(Obj, "backgroundColor"); if(sOriginColor=="transparent") sOriginColor = "#FFFFFF"; } if(!sOverColor) sOverColor = "#cccccc"; if(!sOutColor) sOutColor = sOriginColor; if(!iTime) iTime = 10; if(!iIntervalMs) iIntervalMs = 50; Obj["Extend"] = {}; Obj["Extend"]["OriginalColor"] = sOriginColor; Obj["Extend"]["MoveColor"] = sOverColor; Obj["Extend"]["OutColor"] = sOutColor; Obj["Extend"]["Time"] = iTime; Obj["Extend"]["IntervalMs"] = iIntervalMs; Obj["Extend"]["CompColor"] = bCompColor; Obj["Extend"]["ClassName"] = sClassName; Obj["Extend"]["OverClassName"] = sOverClassName; var iPos = oFaded.Element.Set.length; oFaded.Element.Set[iPos] = Obj; } function fGetDeepTag(Ele, TagAr, ResultAr) { if(!ResultAr) ResultAr = []; var TagArLen = TagAr.length; if(TagArLen===0) return ResultAr; if(TagArLen===1) { for( var i=0, j=Ele.childNodes.length; i<j; i++) { var TempChild = Ele.childNodes[i]; if(TempChild.nodeType===1) { if(TempChild.tagName==TagAr[0]) { ResultAr.push(TempChild); } } } return ResultAr; } for(var i=0, j=Ele.childNodes.length; i<j; i++) { var TempChild = Ele.childNodes[i]; if(TempChild.nodeType===1) { if(TempChild.tagName==TagAr[0]) { var TempAr = TagAr.slice(); TempAr.shift(); arguments.callee(TempChild, TempAr, ResultAr); } } } return ResultAr; } function __Faded_Fade(sOriginalColor, sFinalColor, iTime, sOpt, bPadSharp) { if(!sOriginalColor||sOriginalColor=="") fFatalError("原色不能为空!"); if(!sFinalColor||sFinalColor=="") fFatalError("最终色不能为空!"); if(!iTime||typeof(iTime)!="number") iTime = 5; if(!sOpt) sOpt = "auto"; var sSharp = ""; if(bPadSharp) sSharp = "#"; var Debug = false; var oAr = fSplitColor(sOriginalColor); var oArInt = fHexArrayToInt(oAr); var fAr = fSplitColor(sFinalColor); var fArInt = fHexArrayToInt(fAr); var ReturnAr = []; switch(sOpt) { default: var SubtractAr = []; var SpanAr = []; var ReturnArInt = []; for(var i=0, j=oArInt.length; i<j; i++) { SubtractAr[i] = fArInt[i] - oArInt[i]; SpanAr[i] = SubtractAr[i]/iTime; } for(var i=0, j=iTime; i<j; i++) { ReturnArInt[i] = []; ReturnArInt[i][0] = parseInt(oArInt[0]+(SpanAr[0]*(i+1))); ReturnArInt[i][1] = parseInt(oArInt[1]+(SpanAr[1]*(i+1))); ReturnArInt[i][2] = parseInt(oArInt[2]+(SpanAr[2]*(i+1))); ReturnAr[i] = [ "" ,sSharp ,fPadStr(ReturnArInt[i][0].toString(16)).toUpperCase() ,fPadStr(ReturnArInt[i][1].toString(16)).toUpperCase() ,fPadStr(ReturnArInt[i][2].toString(16)).toUpperCase() ].join(''); } sFinalColor= sFinalColor.replace(/^\#/, ""); if(bPadSharp) sFinalColor = "#"+sFinalColor; ReturnAr[ReturnAr.length-1] = sFinalColor.toUpperCase(); break; } if(Debug) { alert ( " oAr: "+oAr +"\n oArInt: "+oArInt +"\n fAr: "+fAr +"\n fArInt: "+fArInt +"\n typeof(sOpt): "+typeof(sOpt) +"\n SubtractAr: "+SubtractAr +"\n SpanAr: "+SpanAr +"\n ReturnArInt: "+ReturnArInt +"\n ReturnAr: "+ReturnAr ); } return ReturnAr.slice(); } function fHexArrayToInt(ar) { var TempAr = []; for(var i=0, j=ar.length; i<j; i++) { TempAr[i] = parseInt(ar[i], 16); } return TempAr.slice(); } function fSplitColor(sColor) { if(!sColor||sColor=="") { alert("颜色不能为空!"); return; } var Debug = true; sColor = sColor.replace(/^\#/, ""); if(sColor.length == 3) { var sTemp = ""; for(var i = 0, j=sColor.length; i<j; i++) { sTemp+= ""+sColor.charAt(i)+sColor.charAt(i); } sColor = sTemp; } if(sColor.length!=6) { alert("无法识别的颜色代码!") return; } var arHex = []; arHex[0] = ""+sColor.charAt(0)+sColor.charAt(1); arHex[1] = ""+sColor.charAt(2)+sColor.charAt(3); arHex[2] = ""+sColor.charAt(4)+sColor.charAt(5); return arHex.slice(); } function fGetCompColor(sInput, sOpt, bNoSharp, bDebug) { if(!sInput) sInput = "#000000"; if(!sOpt) sOpt = 'hex'; sOpt = sOpt.toLowerCase(); var arCell = []; var arHex = []; var arHexFinal = []; var arInt = []; var arIntFinal = []; var Debug = bDebug; if(Debug) { alert ( "sInput: "+sInput +" sOpt: "+sOpt ); } sInput = sInput.replace(/^\#/, ""); switch(sOpt) { case "rgb": break; default: if(sInput.length==3) { var arTemp = fStringToArray(sInput); sInput = ""+arTemp[0]+arTemp[0]+arTemp[1]+arTemp[1]+arTemp[2]+arTemp[2]; } if(sInput.length==6) { arCell = fStringToArray(sInput); arHex[0] = "0x"+arCell[0]+arCell[1]; arHex[1] = "0x"+arCell[2]+arCell[3]; arHex[2] = "0x"+arCell[4]+arCell[5]; arInt[0] = parseInt(arHex[0], 16); arInt[1] = parseInt(arHex[1], 16); arInt[2] = parseInt(arHex[2], 16); arIntFinal[0] = Math.abs(255-arInt[0]); arIntFinal[1] = Math.abs(255-arInt[1]); arIntFinal[2] = Math.abs(255-arInt[2]); arHexFinal[0] = fPadStr(arIntFinal[0].toString(16)).toUpperCase(); arHexFinal[1] = fPadStr(arIntFinal[1].toString(16)).toUpperCase(); arHexFinal[2] = fPadStr(arIntFinal[2].toString(16)).toUpperCase(); if(Debug) { alert("arCell: "+arCell); alert("arHex: "+arHex); alert("arInt: "+arInt); alert("arIntFinal: "+arIntFinal); alert("arHexFinal: "+arHexFinal); } if(bNoSharp) return arHexFinal.join(""); return "#"+arHexFinal.join(""); } else { alert("无法识别的十六进制颜色代码!"); } break; } return "000000"; } function fStringToArray(sInput) { return sInput.split(""); } function fGetStyle(Ele, sStyle) { var Brs = fCkBrs(); if(Brs===3) { var sReturn = getComputedStyle(Ele, null)[sStyle]; if(/\brgb\b/i.test(sReturn)) { return fRgbToHex(sReturn); } return sReturn; } else return Ele.currentStyle[sStyle]; } function fCkBrs() { switch (navigator.appName) { case 'Opera': return 2; case 'Netscape': return 3; default: return 1; } } function fRgbToHex(sRgb, bNoSharp, bDebug) { if(!sRgb||sRgb=="") throw new Error("RGB颜色代码不正确!"); var Debug = bDebug; var sSharp = ""; if(!bNoSharp) sSharp = "#"; if(/rgb\(/i.test(sRgb)) { sRgb = sRgb.replace(/^[\s\S]*?rgb\((.*?)\)[\s\S]*/gi, "$1").replace(/\s+/g, ""); } var RgbAr = sRgb.split(","); var sReturn = [ sSharp ,(fPadStr((RgbAr[0]-0).toString(16)).toUpperCase()) ,(fPadStr((RgbAr[1]-0).toString(16)).toUpperCase()) ,(fPadStr((RgbAr[2]-0).toString(16)).toUpperCase()) ].join(""); if(Debug)alert(sReturn); return sReturn; } function fPadStr(sSrc, sPad, nLen) { if(!sSrc)return false; if(!sPad)sPad='0'; if(!nLen)nLen=2; sSrc+=''; if(sSrc.length>=nLen)return sSrc; sPad=new Array(nLen+1).join(sPad); var re=new RegExp('.*(.{'+(nLen)+'})$'); return (sPad+sSrc).replace(re,'$1'); } function fIsFunc(Func) { if(Func) if(Func.constructor==Function) return true; return false; } function fIsEmpty(Source) { var bStr = false; if(Source.constructor==String) Source = [Source], bStr = true; return /^\s*$/.test(Source[0]); } function fTrim(Source) { var bStr = false; if(Source.constructor==String) Source = [Source], bStr = true; Source[0] = Source[0].replace(/^\s+|\s+$/g,''); if(bStr) return Source[0]; } function fSetObject(Obj, sMsg, Dcu) { if(!sMsg) sMsg = "无法获得对象!"; if(!Dcu) Dcu = document; switch(Obj.constructor) { case String: Obj = Dcu.getElementById(Obj); break; case Array: Obj = Obj[0]; break; } if(Obj==null) throw new Error(sMsg); return Obj; } function fFatalError(sMsg) { if(!sMsg) sMsg = "an fatal error occurring, program abort now!" throw new Error(sMsg); } function fCkBrs() { switch (navigator.appName) { case 'Opera': return 2; case 'Netscape': return 3; default: return 1; } } function __Id(sTag, oDocument) { if(!oDocument) oDocument = document; return oDocument.getElementById(sTag); } function __E(sTag, oDocument) { if(!oDocument) oDocument = document; return oDocument.createElement(sTag); } function __T(sText, oDocument) { if(!oDocument) oDocument = document; return oDocument.createTextNode(sText); } function fFormat(sStr) { var Len = arguments.length; switch(Len) { case 0: return ""; case 1: return sStr; } var Re = null; for(var i=1, j=0; i<Len; i++, j++) { Re = new RegExp(["\\{", j, "\\}"].join(""), "g"); sStr = sStr.replace(Re, arguments[i]); } Re = null; return sStr; } //<![CDATA[ var Time = 20; var Interval = 5; var Container = document.getElementById("Container"); var StartDate = new Date(); var Fade = new Faded(); Fade.Debug = false; Fade.Element.BatchAdd ( "Container" , "tbody->tr" , ["#F5F5F5", "#ececec"] , ["#cccccc", "#cccccc"] , false //, ["#eeeeee", "#ffffff"] , Time , Interval ); Fade.Go(); var FadedAu = Fade.Get.Au(); document.title = FadedAu.Subject+" "+FadedAu.Version; Fade = null; //]]> </script> </body> </html>
相关特效代码
无相关信息
热门特效代码
腾讯天气预报的JS代码
点击“添加收藏”代码
多款表格边框单元格特殊效果代码
CSS 横向图片列表
网站连接速度测试JavaScript代码
用CSS为表格添加阴影效果
综合搜索引擎代码
超级计数器网页特效代码
强迫访问广告链接代码
nVida 网站图片滑动切换代码
推荐特效代码
强迫访问广告链接代码
点击“添加收藏”代码
CSS 横向图片列表
常用的对联广告带关闭功能
极品仿windows进度条效果
漂亮的触发行变色代码