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

js|链接|闪烁

代码： （将以下代码添加在<head> </head>标签中） <script language="javascript">

var rate = 30;
var object;
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;
}

function doRainbow()
{
if (Browser && act != 1) {
act = 1;
object = event.srcElement;
clrOrg = object.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (Browser && act != 0) {
object.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (Browser && act != 1) {
object = event.srcElement;
while (object.tagName != 'A' && object.tagName != 'BODY') {
object = object.parentElement;
if (object.tagName == 'A' || object.tagName == 'BODY')
break;
}
if (object.tagName == 'A' && object.href != '') {
act = 1;
clrOrg = object.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (Browser && act != 0) {
if (object.tagName == 'A') {
object.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
object.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;
}
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
</script>然后在body域中任意做一个连接可以看到效果了！

<head><script language="javascript">var rate = 30;var object;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;}function doRainbow(){if (Browser && act != 1) {act = 1;object = event.srcElement;clrOrg = object.style.color;TimerID = setInterval("ChangeColor()",100);}}function stopRainbow(){if (Browser && act != 0) {object.style.color = clrOrg;clearInterval(TimerID);act = 0;}}function doRainbowAnchor(){if (Browser && act != 1) {object = event.srcElement;while (object.tagName != 'A' && object.tagName != 'BODY') {object = object.parentElement;if (object.tagName == 'A' || object.tagName == 'BODY')break;}if (object.tagName == 'A' && object.href != '') {act = 1;clrOrg = object.style.color;TimerID = setInterval("ChangeColor()",100);}}}function stopRainbowAnchor(){if (Browser && act != 0) {if (object.tagName == 'A') {object.style.color = clrOrg;clearInterval(TimerID);act = 0;}}}function ChangeColor(){object.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;}document.onmouseover = doRainbowAnchor;document.onmouseout = stopRainbowAnchor;</script></head><body><a href="http://www.webjx.com">网页教学网</a></body>

    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

时间： 2024-10-30 13:52:43

实现彩色闪烁超链接效果的JS代码的相关文章

[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构

写在前面 前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病,总感觉不完美,心里一直惦记着那件事,也是在我写过那篇文章之后,没多久,在博客园首页看到了一篇文章较复杂js的书写格式,这里的代码看着比较简介,就想着抽时间将之前的那段js代码进行重构.说做就做,不想一想起之前写过那样的代码,心里就有疙瘩.所以也就有了这篇文章. $.extend 在开始重构之前,需要先学习一

仿新浪微博登陆邮箱提示效果的js代码

本文为大家介绍下使用js仿新浪微博登陆邮箱提示效果,具体实现代码如下,感兴趣的朋友可以参考下,希望对大家有所帮组   复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv=&quo

仿新浪微博登陆邮箱提示效果的js代码_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8

鼠标滑上去后图片放大浮出效果的js代码_图象特效

复制代码 代码如下: <script> function GetAbsPosition(obj) { var curleft = 0, curtop = 0; do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); return [curleft,curtop]; } function ShowFloatingImage(image, width, height) {

仿Flash幻灯片效果的js代码

请稍候--

js代码实现下拉菜单【推荐】_javascript技巧

效果: js代码: <script type="text/javascript"> function ShowSub(li) {//函数定义 var subMenu = li.getElementsByTagName("ul")[0] ;//获取 subMenu.style.display = " block "; } function HideSub(li) { var subMenu = li.getElementsByTagNa

JS实现超简洁网页title标题跑动闪烁提示效果代码_javascript技巧

本文实例讲述了JS实现超简洁网页title标题跑动闪烁提示效果代码.分享给大家供大家参考,具体如下: 这里演示不几行JS代码实现的网页Title文字跑动效果,类似有消息时的标题闪烁提醒功能,在JS代码中,当变量_record累加到3是,将其赋值为1.相当于无限循环.需要显示的消息提示内容可自拟哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-title-blink-style-codes/ 具体代码如下: <html xmlns="

JS+CSS实现闪烁字体效果代码_javascript技巧

本文实例讲述了JS+CSS实现闪烁字体效果的方法.分享给大家供大家参考,具体如下: <div id="blink">闪烁的文字</div> <script language="javascript"> function changeColor(){ var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"; color=color.spli

js实现网页标题栏闪烁提示效果实例分析_javascript技巧

本文实例讲述了js实现网页标题栏闪烁提示效果的方法.分享给大家供大家参考.具体分析如下: 网页标题栏闪烁效果我们在一些聊天工具会常看到,像现在流量的聊天室,下面我们就来给大家总结一款实现网页标题栏闪烁提示代码,感兴趣可参考一下. 公司的项目中用到了这个新消息提示的效果,主要用于提示用户有新消息.具体实现代码如下: 复制代码 代码如下: var newMessageRemind={ _step: 0, _title: document.title, _timer: null, //显示新消息提示