qslider推子_面向对象[链接推子示例]

qslider推子

/*###############################*/
/*     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;
    }
} 

在此示例中，您可以看到我正在使用单词new。

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。

翻译自: https://bytes.com/topic/javascript/insights/855426-object-orientation-links-fader-example

qslider推子