多彩链接靓起来

数码时尚

枫 叶子

　　网页中鼠标指到链接文字时，一般会变换颜色或者加下滑线，久而久之不免给人单调之感。下面介绍的多彩链接则是一种与众不同的链接风格：鼠标滑过时，文字会不断从一种色彩自然过渡到另一种色彩。下面通过javascript代码来实现此效果。

　　在网页文件的＜body＞＜/body＞之间插入以下代码：

　　＜script＞

　　//定义变色控制变量

　　var rate = 20; //色彩变化的速度，值越大变化越快

　　var obj; //鼠标滑过事件所对应的对象元素

　　var act = 0; // act=1表示已在变色

　　var elmH = 0; // 色彩

　　var elmS = 128; // 饱和度

　　var elmV = 255; // R、G、B最高值

　　var clrOrg;//文字原色

　　var TimerID; // 计时器标志

　　//检测浏览器类型，控制启用及停止此链接风格

　　//如果浏览器是为Microsoft Internet Explorer 4.0以上，Brower为真

　　if (navigator.appName.indexOf("Microsoft",0) != -1 &&

　　parseInt(navigator.appVersion) >= 4) {

　　Browser = true;} else {Browser = false; }

　　if (Browser)

　　{document.onmouseover = doRainbowAnchor;//鼠标滑过时变色

　　document.onmouseout = stopRainbowAnchor;}//鼠标移走停止变色并恢复原色

　　function doRainbowAnchor()//启用此风格

　　{if (Browser && act != 1) {

　　obj = event.srcElement;//鼠标滑过事件所对应的对象元素

　　while (obj.tagName != 'A' && obj.tagName != 'BODY') {//tagname指元素的标签名，像A、BODY等

　　obj = obj.parentElement; //当标签不是A或BODY时，取父元素标签

　　if (obj.tagName == 'A' || obj.tagName == 'BODY') break;}

　　if (obj.tagName == 'A' && obj.href != '') {

　　act = 1;

　　clrOrg = obj.style.color; //保存变化前的颜色

　　TimerID = setInterval("ChangeColor()",100);//启动计时器，每隔0.1秒变色，时间可自己调节，1000表示1秒

　　}}}

　　function stopRainbowAnchor()//停用此风格

　　{if (Browser && act != 0) {

　　if (obj.tagName == 'A') {

　　obj.style.color = clrOrg;//恢复变化前的颜色

　　clearInterval(TimerID);//停止计时器

　　act = 0;}}}

　　//通过改变RGB值来获得不同的文字颜色

　　function ChangeColor()

　　{ obj.style.color = makeColor();}

　　function makeColor()

　　{if (elmS == 0) {

　　elmR = elmV; elmG = elmV; elmB = elmV;}

　　else { t1 = elmV;

　　t2 = (255 - elmS) * elmV/255;

　　t3 = elmH % 60；

　　t3 = (t1 - t2) * t3/60;

　　//不同色彩，不同RGB值

　　if (elmH < 60) {elmR = t1; elmB = t2; elmG = t2 + t3;}

　　else if (elmH < 120) {elmG = t1; elmB = t2; elmR = t1 - t3;}

　　else if (elmH < 180) {elmG = t1; elmR = t2; elmB = t2 + t3;}

　　else if (elmH < 240) {elmB = t1; elmR = t2; elmG = t1 - t3;}

　　else if (elmH < 300) {elmB = t1; elmG = t2; elmR = t2 + t3;}

　　else if (elmH < 360) {elmR = t1; elmG = t2; elmB = t1 - t3;}

　　else {elmR = 0; elmG = 0; elmB = 0;}}

　　elmR = Math.floor(elmR);//取整RGB值

　　elmG = Math.floor(elmG);

　　elmB = Math.floor(elmB)；

　　clrRGB = '#' + elmR.toString(16) + elmG.toString(16) + elmB.toString(16);//转化为十六进制的颜色值

　　elmH = elmH + rate;//改变色彩，再产生不同RGB组合

　　if (elmH >= 360) elmH = 0;

　　return clrRGB;} //返回新的RGB组合值

　　＜/script＞

　　＜p＞＜a href="http//www.cpcw.com"＞多彩链接演示＜/a＞＜/p＞

　　添加完成后存盘用IE看看，意外吧？

　　以上代码并不复杂，网页编辑者可查看注释，在理解的基础上灵活运用。