台灣最大程式設計社群網站
線上人數
523
 
會員總數:245785
討論主題:189420
歡迎您免費加入會員
討論區列表 >> 專欄文章 >> 漸變色字
[]  
[我要回覆]
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
漸變色字
價值 : 0 QP  點閱數:1204 回應數:0
樓主

站務人員 站長
門外漢
0 1580
542 9
發送站內信

捐贈 VP 給 站務人員
各位前輩大概看過了,不過我是第一次看到(^^)
到 http://www.princefari.com 可以看到此特效的範例(將滑鼠移到 [ENTER] 或 DubMatrix 上就知道了)

請將下面的原碼存成 fadertcw.js ,然後再用<script src="fadertcw.js">引用就行了。

原碼:

/*****************************************\
|| Fade Script Version 3.1 ||
|| http://anarchos.xs.mw/fade.phtml ||
|| (c) July 2001 ||
|| _____________________________________ ||
|| Created by: ||
|| Anarchos > anarchos.xs.mw ||
|| _____________________________________ ||
|| auto-startColor by Mike West ||
|| mike@westman.org ||
|| _____________________________________ ||
|| uniqueID upgrade by DubMatrix ||
|| http://www.princefari.com ||
|| _____________________________________ ||
|| Color conversion from decimal to ||
|| hex (dehexize function) by: ||
|| Litejet > litejet@hotmail.com ||
|| _____________________________________ ||
|| Fade, hex, setColor functions by: ||
|| Dak Phoenix > phoenix-archetypes.com ||
|| _____________________________________ ||
|| domouseover/out based on scripts by ||
|| The Shadow > www.icon.co.za/~andrewk ||
|| ||
\*****************************************/

/*************
**** <config>
**/

fadeColor = "#FCA503"; // color to fade to
//fadeColor = "#0";
stepIn = 20; // delay when fading in
stepOut = 25; // delay when fading out

/* set to true or false; true will
** cause all links to fade automatically
** (you won't need to add class="fade")
***/
autoFade = true;

/* set to true or false; true will cause all CSS
** classes with "fade" in them to fade onmouseover
***/
sloppyClass = true;

/* set to true or false; true will make the script
** work for Macs (IE 5+), but you will have to give
** a name (name="blah") to each link that you want
** to fade.
***/
macCompat = false;

/**
**** </config>
**************/

/*************
**** <install>
**

Now, once you have customized your fading colors,
you need to include your customized .js file on
every page that you want to use it in. You can
include javascript files using this syntax (in
the head of a document):

<script src="fade.js" language="Javascript"></script>

Now that you have the file included, you need to
setup your links a small bit. Each link that you
want to fade needs to use the fade class.

Example:

<a href="blah.html" class="fade">click here</a>

Also, the link must be plain text. This means
that you can't have 's, <i>'s, <font>'s, etc.
inside of the link.

Example of what not to do:

<a href="blah.html" class="fade"><b>click
here</a>

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;

fadeColor = dehexize(fadeColor.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){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade && srcElement.className != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {
if (!srcElement.startColor) {
srcElement.startColor = (srcElement.style.color)? srcElement.style.color: srcElement.currentStyle.color;
srcElement.startColor = dehexize(srcElement.startColor.toLowerCase());
}
var link = (macCompat? srcElement.name: srcElement.uniqueID);
if (link) fade(srcElement.startColor,fadeColor,link,stepIn);
else if (macCompat) alert("Error: Mac Compatility mode enabled, but link has no name.");
}
}
}

function domouseout() {
if (document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade && srcElement.className != "nofade") || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) {
var link = (macCompat? srcElement.name: srcElement.uniqueID);
if (link) fade(fadeColor,srcElement.startColor,link,stepIn);
}
}
}

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 && eval(fadeId[0])) {
var orig = eval(fadeId[0]);
setColor(orig.startColor[0],orig.startColor[1],orig.startColor[2],orig);
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;
}

本篇文章發表於2002-05-23 00:00
目前尚無任何回覆
   

回覆
如要回應,請先登入.