实现彩色闪烁超链接效果的JS代码

有的站点超链接鼠标移上去时有彩色闪烁效果,其实很简单就是调用了一段JS代码而已。
下面就是实现效果所需代码:

  1<script language="javascript">
  2
  3var rate = 30;   
  4var object;   
  5var act = 0;   
  6var elmH = 0;   
  7var elmS = 128;   
  8var elmV = 255;   
  9var clrOrg;   
 10var TimerID; 
 11
 12if (navigator.appName.indexOf("Microsoft",0) != -1 && parseInt(navigator.appVersion) >= 4) {   
 13Browser = true;   
 14} else {   
 15Browser = false;   
 16} 
 17
 18  
 19function doRainbow()   
 20{   
 21if (Browser && act != 1) {   
 22act = 1;   
 23object = event.srcElement;   
 24clrOrg = object.style.color;   
 25TimerID = setInterval("ChangeColor()",100);   
 26}   
 27}   
 28function stopRainbow()   
 29{   
 30if (Browser && act != 0) {   
 31object.style.color = clrOrg;   
 32clearInterval(TimerID);   
 33act = 0;   
 34}   
 35}   
 36function doRainbowAnchor()   
 37{   
 38if (Browser && act != 1) {   
 39object = event.srcElement;   
 40while (object.tagName != 'A' && object.tagName != 'BODY') {   
 41object = object.parentElement;   
 42if (object.tagName == 'A' || object.tagName == 'BODY')   
 43break;   
 44}   
 45if (object.tagName == 'A' && object.href != '') {   
 46act = 1;   
 47clrOrg = object.style.color;   
 48TimerID = setInterval("ChangeColor()",100);   
 49}   
 50}   
 51}   
 52function stopRainbowAnchor()   
 53{   
 54if (Browser && act != 0) {   
 55if (object.tagName == 'A') {   
 56object.style.color = clrOrg;   
 57clearInterval(TimerID);   
 58act = 0;   
 59}   
 60}   
 61}   
 62function ChangeColor()   
 63{   
 64object.style.color = makeColor();   
 65}   
 66function makeColor()   
 67{   
 68if (elmS == 0) {   
 69elmR = elmV; elmG = elmV; elmB = elmV;   
 70}   
 71else {   
 72t1 = elmV;   
 73t2 = (255 - elmS) * elmV / 255;   
 74t3 = elmH % 60;   
 75t3 = (t1 - t2) * t3 / 60; 
 76
 77if (elmH < 60) {   
 78elmR = t1; elmB = t2; elmG = t2 + t3;   
 79}   
 80else if (elmH < 120) {   
 81elmG = t1; elmB = t2; elmR = t1 - t3;   
 82}   
 83else if (elmH < 180) {   
 84elmG = t1; elmR = t2; elmB = t2 + t3;   
 85}   
 86else if (elmH < 240) {   
 87elmB = t1; elmR = t2; elmG = t1 - t3;   
 88}   
 89else if (elmH < 300) {   
 90elmB = t1; elmG = t2; elmR = t2 + t3;   
 91}   
 92else if (elmH < 360) {   
 93elmR = t1; elmG = t2; elmB = t1 - t3;   
 94}   
 95else {   
 96elmR = 0; elmG = 0; elmB = 0;   
 97}   
 98}   
 99elmR = Math.floor(elmR);   
100elmG = Math.floor(elmG);   
101elmB = Math.floor(elmB);   
102clrRGB = '#' + elmR.toString(16) + elmG.toString(16) + elmB.toString(16);   
103elmH = elmH + rate;   
104if (elmH >= 360)   
105elmH = 0;   
106return clrRGB;   
107}   
108document.onmouseover = doRainbowAnchor;   
109document.onmouseout = stopRainbowAnchor;   
110</script>

把上面的代码另存为一个JS文件,然后在想实现此效果的页面调用即可!

Published At
Categories with 网页设计
comments powered by Disqus