超级连接很酷的变色

原创 2006年06月01日 13:40:00

<script src="fade.js"></script>
fade.js

/**
**** <config>
**/
startColor = "#000000"; // MouseOut link color
endColor = "#FFFFFF"; // MouseOver link color

stepIn = 20; // delay when fading in
stepOut = 23; // delay when fading out

/*
** set to true or false; true will
** cause all links to fade automatically
***/
autoFade = true;
/*
** set to true or false; true will cause all CSS
** classes with "fade" in them to fade onmouseover
***/
sloppyClass = true;
/**
**** </config>
**************/
/*************
**** <install>
**
**
**** </install>
**************/

hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

document.onmouseover = domouseover;
document.onmouseout = domouseout;

startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());

var fadeId = new Array();

function dehexize(Color){
var colorArr = new makearray(3);
for (i=1; i<7; i++){
for (j=0; j<16; j++){
if (Color.charAt(i) == hexa[j]){
if (i%2 !=0)
colorArr[Math.floor((i-1)/2)]=eval(j)*16;
else
colorArr[Math.floor((i-1)/2)]+=eval(j);
}
}
}
return colorArr;
}

function domouseover() {
if(document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
fade(startColor,endColor,srcElement.uniqueID,stepIn);
}
}

function domouseout() {
if (document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
fade(endColor,startColor,srcElement.uniqueID,stepOut);
}
}

function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;
}

function hex(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else
return "" + hexa[Math.floor(i/16)] + hexa[i%16];}

function setColor(r, g, b, element) {
var hr = hex(r); var hg = hex(g); var hb = hex(b);
element.style.color = "#"+hr+hg+hb;
}

function fade(s,e, element,step){
var sr = s[0]; var sg = s[1]; var sb = s[2];
var er = e[0]; var eg = e[1]; var eb = e[2];

if (fadeId[0] != null && fade[0] != element){
setColor(sr,sg,sb,eval(fadeId[0]));
var i = 1;
while(i < fadeId.length){
clearTimeout(fadeId[i]);
i++;
}
}

for(var i = 0; i <= step; i++) {
fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
}
fadeId[0] = element;
}

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

7个很酷的jQuery插件

1. Spin.js Spin.js是一个用于创建过程进度提醒控件的框架,使用CSS3来渲染UI,当浏览器不支持时,采用VML支持。不需要图片,没有外部CSS,没有依赖其它框架,高度可配置,分辨率无...

59款很酷的jQuery幻灯片演示和下载

jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片,一种在有限的网页空间内展示系列项目时非...

前端之美:9个很酷的基于 CSS3 和 JavaScript 实现的效果

这篇文章向大家分享9个很酷的挑选自 DemoStudio 的 CSS3 和 JavaScript 实现的精美效果。DemoStudio 是 Mozilla Developer Network(MDN)...

Android中一些很酷的开源框架

Android酷炫实用的开源框架(UI框架) 前言 忙碌的工作终于可以停息一段时间了,最近突然有一个想法,就是自己写一个app,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望...

C语言中一些很酷的技巧(cool tricks)

C语言中一些很酷的技巧(cool tricks) 来自Quora,觉得不错,就实践了一下。 1.  #if 0 ...... #endif 块中的内容不会被编译,因为注释不允许嵌套,我们可以把暂...

很酷的可视化工具VTK

PROJECT About Participants License Image Gallery Case Studies Publications Statistics Pr...

60款很酷的jQuery 幻灯片演示和下载

Interactive Photo Desk (演示 | 下载) Beautiful Photo Stack Gallery with jQuery and CSS3 (演示 | 下载) ...

一条很酷的 vim 技巧

Vim 中截取部分内容保存到其他文件。按 Escape进入命令模式,然后输入 :start,endw file,其中的 start 是当前文件中要保存的第一行,end 是要保存的最后一行,w 表示希望...

很酷的C语言技巧

转自:http://blog.jobbole.com/16035/ C语言常常让人觉得它所能表达的东西非常有限。它不具有类似第一级函数和模式匹配这样的高级功能。但是C非常简单,并且仍然有一些非常...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)