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

2016-01-29 11:49 92 1 收藏

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

【 tulaoshi.com - Javascript 】

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/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;

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/javascript/)

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文件,然后在想实现此效果的页面调用即可!

来源:http://www.tulaoshi.com/n/20160129/1483468.html

延伸阅读
ppt添加超链接之后,偶尔会出现链接打不开的情况,原因有很多,下面整理了一些常见的原因及解决方法,希望对大家有所帮助。 为什么ppt双击超链接打不开? 描述:我先创建了一个文本框,然后在里面插入了超链接,插入的是我的电脑里面一个盘里面的视频,为什么我双击超链接它不播放啊? 只能右键点击超链接然后选打开超链接才可以观看。解决:你...
标签: 电脑入门
过去,在幻灯片演示结束后,习惯用一个谢谢大家的画面来结束播放。不过近年来这一做法却不再流行,大家更倾向于播放结束后马上回到封面页,以显示授课题目和授课人等信息。特别是一些固定场所的演示,更希望能够循环播放,而不是播放完成后退出播放状态,再从第一张进入重新播放。 其实,要实现这样的效果并不难,只需要一个小小的超链接就可...
标签: 电脑入门
看了朋友们设计的点小图 看大图,为在WPS演示中提供了一种展示图片的好方法。相信大家看过QQ空间中的图片浏览方式:单击图片左边观看上一张,单击图片右边则观看下一张。其实,这一效果在WPS演示中也很容易实现。 第1步:准备图片。要求图片的宽高保持相同,比如:宽25cm、高16cm。如果不是,请用其它图片编辑工具进行适当的裁剪或缩放处理,...
标签: Web开发
代码如下: function SetWinHeight(obj)  {  var win=obj;  if (document.getElementById)  {     if (win && !window.opera)     {      if (win.contentDocument && win.contentDocument.body.o...
标签: Web开发
无标题文档 #div1{ height:200px;width:200px; filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=1,transition=12); background:#CCCCCC; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

经验教程

849

收藏

51
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部