一个非常有趣的链接特效(页 1) - 网站前台设计(UI)

longziyong 发表于 2007-12-8 14:51

一个非常有趣的链接特效

一个很有趣的链接特效，就是当你把鼠标放在链接文字上时，文字会不断的变换颜色。我觉得效果不错，在这里给大家推荐一下。你只需要把下面的脚本粘贴到源文件中即可，其他不用设置什么。

[size=2]<script language="javascript">
var rate = 20;
var obj;
var act = 0;
var elmH = 0;
var elmS = 128;
var elmV = 255;
var clrOrg;
var TimerID;

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 doRainbow() {
  if (Browser && act != 1) {[/size]
[size=2] act = 1;
obj = event.srcElement;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
  }
}

function stopRainbow() {
  if (Browser && act != 0) {
obj.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
  }
}

function doRainbowAnchor() {
  if (Browser && act != 1) {
obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
   obj = obj.parentElement;
   if (obj.tagName == 'A' || obj.tagName == 'BODY')
      break;
}
if (obj.tagName == 'A' && obj.href != '') {
   act = 1;
   clrOrg = obj.style.color;
   TimerID = setInterval("ChangeColor()",100);
}
  }
}

function stopRainbowAnchor() {
  if (Browser && act != 0) {
if (obj.tagName == 'A') {
   obj.style.color = clrOrg;
   clearInterval(TimerID);
   act = 0;
}
  }
}[/size]
[size=2]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;
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);
  elmG = Math.floor(elmG);
  elmB = Math.floor(elmB);
  clrRGB = '#' + elmR.toString(16) + elmG.toString(16) + elmB.toString(16);
  elmH = elmH + rate;
  if (elmH >= 360) elmH = 0;
  return clrRGB;
}
</script>[/size]
[bold][color=#0000ff]
运行效果，看看我的主页嘛，首页上的每一个链接都会变色。[url=http://www.pdfbbs.com/]http://www.pdfbbs.com[/url][/color][/bold]

luo123 发表于 2007-12-9 18:51

顶一个

那边有朵蘑菇云 发表于 2007-12-12 11:53

不错挺漂亮的问下是你自己的写的吗？高手教下

longziyong 发表于 2007-12-28 11:39

哈哈，不是我写的，好东西谁都可以用撒，网络上的东东本来就应该大家分享嘛。

yxxhack 发表于 2007-12-28 15:04

看看.......

lele2007 发表于 2007-12-28 18:34

好！收藏了！日后用！

xinxue 发表于 2008-1-5 19:35

收藏了,挺好的.

tent 发表于 2008-1-8 10:35

不错,把变的颜色再改一下就更好了.
开始和结束中过渡的颜色有的太刺眼了.

longziyong 发表于 2008-1-22 20:12

开始和结束中过渡的颜色有的太刺眼了.
要修改过渡中的颜色，我想只有在生成颜色的函数中把不要的颜色过滤掉，不过这样会增加很多代码，也提高难度了。

gld235 发表于 2008-2-5 20:20

往哪儿放啊?

Adalmy123 发表于 2008-2-6 16:20

是挺好的。。。。但是那个颜色[em20] [em20] [em20] [em20] [em20]

页: [1]