淡除淡入的连接 |
|
/*****************************************\
|| Fade Script Version 2.2 || || http://anarchos.xs.mw/fade.phtml || || (c) Jan 2001 || || ___________________________________ || || || || Created by: || || Anarchos > anarchos.xs.mw || || ___________________________________ || || || || Color conversion from decimal to || || hex (dehexize function) by: || || Litejet > [email protected] || || ___________________________________ || || || || Fade, hex, setColor functions by: || || Dak Phoenix > phoenix-archetypes.com || || ___________________________________ || || domouseover/out based on scripts by || || The Shadow > www.icon.co.za/~andrewk || \*****************************************/ /************* **** <config> **/ startColor = "#303030"; // 初始色 endColor = "#a0a0a0"; // 最终色 stepIn = 17; // 淡入延迟 stepOut = 27; // 淡出延迟 debugIt = true; // 除错模式 true 或 false sloppyClass = false; //相似类 true 或 false /** **** </config> **************/ /************* **** <install> ** 1.将文件存为"fade.js"后,在HTML里加上: <script src="fade.js" language="Javascript"></script> 2.将所需此特效连接的"class"属性改为"fade".再给他加上唯一的"name"属性 例如: <a href="blah.html" name="fading_link_1" class= "fade">click here</a> 注:唯一的"name"属性指不可以在HTML中有相同的"name"属性,否则会出错。如果除错模式是"true",遇到两个或多个相同的"name"属性会自动警告。 3。连接中不可以有<b>, <i>, <font>等标签. 例如: <a href="blah.html" name="fading_link_1" class="fade"><b>click</b> here</a> 不会有任何特效 4.如果相似类为"true",且连接的"class"属性含有字串"fade".如:"dd_fade","fade_me".那此脚本对那些连接同样有效。 注:可以这样做: <style> .fader1 { font-size: 16pt; background-color: #46f;} .iliketofade {font-family: Tahoma, Arial, Helvetica; text-decoration:underline;} </style> <script src="fade.js" language="Javascript"></script> ... ... ... <a herf="somewhere" class="iliketofade" name="example">click me</s> Have fun! -Anarchos- ** **** </install> **************/ hexa = new makearray(16); for(var i = 0; i < 10; i++) hexa[i] = i; hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; document.onmouseover = domouseover; document.onmouseout = domouseout; startColor = dehexize(startColor.toLowerCase()); endColor = dehexize(endColor.toLowerCase()); var fadeId = new Array(); function dehexize(Color){ var colorArr = new makearray(3); for (i=1; i<7; i++){ for (j=0; j<16; j++){ if (Color.charAt(i) == hexa[j]){ if (i%2 !=0) colorArr[Math.floor((i-1)/2)]=eval(j)*16; else colorArr[Math.floor((i-1)/2)]+=eval(j); } } } return colorArr; } function domouseover() { if(document.all){ srcElement = event.srcElement; if (srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) { var linkName = srcElement.name; if (eval(linkName).length > 1){ if (debugIt) alert("Fade error: " + eval(linkName).length + " links are named " + linkName + "."); } else fade(startColor,endColor,linkName,stepIn); } } } function domouseout() { if (document.all){ srcElement = event.srcElement; if (srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) { var linkName = srcElement.name; if (eval(linkName).length > 1){ } else fade(endColor,startColor,linkName,stepOut); } } } function makearray(n) { this.length = n; for(var i = 1; i <= n; i++) this[i] = 0; return this; } function hex(i) { if (i < 0) return "00"; else if (i > 255) return "ff"; else return "" + hexa[Math.floor(i/16)] + hexa[i%16];} function setColor(r, g, b, element) { var hr = hex(r); var hg = hex(g); var hb = hex(b); element.style.color = "#"+hr+hg+hb; } function fade(s,e, element,step){ var sr = s[0]; var sg = s[1]; var sb = s[2]; var er = e[0]; var eg = e[1]; var eb = e[2]; if (fadeId[0] != null && fade[0] != element){ setColor(sr,sg,sb,eval(fadeId[0])); var i = 1; while(i < fadeId.length){ clearTimeout(fadeId[i]); i++; } } for(var i = 0; i <= step; i++) { fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" + step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+ ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step); } fadeId[0] = element; } |