/*###############################*/
/* Link fade script by iam_clint, bytes.com */
/* www.bytes.com, If you use this script on your site */
/* Please keep this comment at the top of the javascript */
/*###############################*/
window.onload=function() { setupLinks(); }
var red=0; /*base 16*/
var green=15; /*15 because I want the faded in color to be super green*/
var blue=0; /*no blue*/
var fade_in_speed=20;
var fade_out_speed=200;
var start_color="#000000";
var divider;
function cHex(dec) {
var hex=dec.toString(16); /*Converts decimal to hax*/
if (hex.length==1) { hex+=""+hex; } /*This just makes sure that the return is atleast 2 digits, so if the hax is actually F it is going to return FF*/
return hex;
}
function rgb(r, g, b) {
var str="#"; /*Hex Colors Start With #*/
str+=cHex(r); /*Red*/
str+=cHex(g); /*Green*/
str+=cHex(b); /*Blue*/
return str;
}
function hoverObj(obj, fspeedin, fspeedout) {
/*Set instance specific variables*/
this.id = hoverObj.Instances.length; /*Gets the array length*/
hoverObj.Instances[this.id] = this; /*sets this object to this instance so it can be referenced to like an array*/
this.cObj=obj; /*This sets this instance's object to what was passed.. this could be used for other tags other than links*/
this.current=0; /*This just starts the current color off at 0*/
this.speedIn=fspeedin; /*This is the speed at which the color fades in at*/
this.speedOut=fspeedout; /*This is the speed at which the color fades iout at*/
this.interval; /*This is a variable being used to store the interval id*/
this.direction; /*This tells the changeColor function to add or subtract to current*/
this.hoverLink=hoverLink; /*Sets a reference to the function hoverLink from within this instance*/
this.changeColor=changeColor;
this.isOver=false;
}
hoverObj.Instances = new Array(); /*Sets Instances in hoverObj to an array*/
function changeColor() {
if (this.direction==1) { /*I used 1 for increasing current*/
if (this.current<15) { this.current+=1;} else {
if (!this.isOver) {
window.clearInterval(this.interval); /*clears the interval*/
this.direction=0;
this.interval=window.setInterval("hoverObj.Instances[" + this.id + "].changeColor()", this.speedOut);
return false;
}
}
if (this.current>15) { this.current=15; } /*if its above 15 set it to 15 so the hex value with be FF*/
} else {
if (this.current>0) { this.current-=1; } else { window.clearInterval(this.interval); this.cObj.style.color=start_color; return false; } /*fade out*/
}
var calc_red=Math.round(this.current*(red/15));
var calc_green=Math.round(this.current*(green/15));
var calc_blue=Math.round(this.current*(blue/15));
this.cObj.style.color=rgb(calc_red, calc_green, calc_blue); /*actually set the color*/
}
function hoverLink(direction) {
if (direction==1) { this.isOver=true; this.direction=1 } else { this.isOver=false; }
if (this.direction==1 && this.isOver) { this.interval=window.setInterval("hoverObj.Instances[" + this.id + "].changeColor()", this.speedIn); /*sets this instance of the interval( to start fading in*/ }
}
function setupLinks() {
var links=document.getElementsByTagName("A"); /*Get all the elements that are <A />*/
for (var i=0; i<links.length; i++) {
links[i].setAttribute("i", i);
links[i].onmouseover=function() {
if (this.getAttribute("hoverID")=="" || this.getAttribute("hoverID")==null) {
var lnk=new hoverObj(this, fade_in_speed, fade_out_speed); /*this important because for each link this loop finds it gives it its own instance of hoverObj*/
this.setAttribute("hoverID", lnk.id);
}
var link=hoverObj.Instances[this.getAttribute("hoverID")];
link.hoverLink(1);
}
links[i].onmouseout=function() {
var link=hoverObj.Instances[this.getAttribute("hoverID")]; /*refers to the instance given in onmouseover*/
link.hoverLink(0);
}
links[i].style.color=start_color;
}
}
在此示例中,您可以看到我正在使用“新”一词。
var lnk=new hoverObj(this, fade_in_speed, fade_out_speed);
这正在创建hoverObj的实例
function hoverObj(obj, fspeedin, fspeedout) {
/*Set instance specific variables*/
this.id = hoverObj.Instances.length; /*Gets the array length*/
hoverObj.Instances[this.id] = this; /*sets this object to this instance so it can be referenced to like an array*/
this.cObj=obj; /*This sets this instance's object to what was passed.. this could be used for other tags other than links*/
this.current=0; /*This just starts the current color off at 0*/
this.speedIn=fspeedin; /*This is the speed at which the color fades in at*/
this.speedOut=fspeedout; /*This is the speed at which the color fades iout at*/
this.interval; /*This is a variable being used to store the interval id*/
this.direction; /*This tells the changeColor function to add or subtract to current*/
this.hoverLink=hoverLink; /*Sets a reference to the function hoverLink from within this instance*/
this.changeColor=changeColor;
this.isOver=false;
}
hoverObj.Instances = new Array(); /*Sets Instances in hoverObj to an array*/
您可能会问自己,为什么我需要一个以上的hoverObj实例。
原因是每个链接可以独立运行。 因此,当一个链接逐渐消失时,另一个链接可能会逐渐消失,这可以使事情顺利进行,但每个链接都有自己的“计时器”,而不是共享1。
From: https://bytes.com/topic/javascript/insights/855426-object-orientation-links-fader-example