网页中鼠标指到链接文字时，一般会变换颜色或者加下滑线，久而久之不免给人单调之感。下面介绍的多彩链接则是一种与众不同的链接风格：鼠标滑过时，文字会不断从一种色彩自然过渡到另一种色彩。下面通过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看看，意外吧？
以上代码并不复杂，网页编辑者可查看注释，在理解的基础上灵活运用。
-
-
|
首页 
用户登录 
新用户注册 
（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）
