繁體中文当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 实现彩色闪烁超链接效果的JS代码
- HTML/XHTML教程
- CSS基础：设计网页常用规范详解
- CSS教程：十步学会用css建站
- CSS基础：24条网页布局开发小技巧
- CSS教程：在网页布局中简单实现垂直居中的办法
- css基础教程：颜色和文本属性的控制
- 专家总结：网页设计师必须遵守的十条守则
- html技巧：超级链接a的提示和打开方式
- css教程：学习背景图像属性background
- 例说网页Semantics：Html/Xhtml是否真正符合标准
- IE7与web标准设计系列教程：前言
- IE7与web标准设计系列教程：更丰富的CSS选择符
- IE7与web标准设计系列教程：修正引起页面布局混乱的祸首
- web标准教程：IE6和IE7的共存
- web标准：IE多版本共存的解决方案：IETester
- CSS基础教程：认识CSS选择符
- web标准：比较IE6与IE7，放纵的孩子与严厉的父亲
- 学好标准CSS的模型是否必须放弃IE？
- CSS教程：如何处理有冲突的CSS规则
- 教你用html和css写出漂亮正规的Blog
- CSS基础：如何避免table强迫症
HTML/XHTML教程 中的 实现彩色闪烁超链接效果的JS代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-04 浏览: 86 ::
收藏到网摘: n/a
有的站点超链接鼠标移上去时有彩色闪烁效果，其实很简单就是调用了一段JS代码而已。
下面就是实现效果所需代码：
<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>
把上面的代码另存为一个JS文件，然后在想实现此效果的页面调用即可！
评论 (0) All
