»
EnglishFrenchVietnamese

Print - Span Color Cycle Demo - JavaScriptBank.com

Full version: jsB@nk » Text » Fade-Glow » Span Color Cycle Demo
URL: https://www.javascriptbank.com/span-color-cycle-demo.html

Span Color Cycle Demo © JavaScriptBank.comThis JavaScript makes links on your webpages change colour continously.

Full version: jsB@nk » Text » Fade-Glow » Span Color Cycle Demo
URL: https://www.javascriptbank.com/span-color-cycle-demo.html



JavaScript
<SCRIPT type=text/javascript>/************************************************* Function    : getColor** Parameters  :start - the start color (in the form "RRGGBB" e.g. "FF00AC")*end - the end color (in the form "RRGGBB" e.g. "FF00AC")*percent - the percent (0-100) of the fade between start & end** returns  : color in the form "#RRGGBB" e.g. "#FA13CE"** Description : This is a utility function. Given a start and end color and*    a percentage fade it returns a color in between the 2 colors***************************************************/function getColor(start, end, percent){function hex2dec(hex){return(parseInt(hex,16));}function dec2hex(dec){return (dec < 16 ? "0" : "") + dec.toString(16);}var r1 = hex2dec(start.slice(0,2)), g1=hex2dec(start.slice(2,4)), b1=hex2dec(start.slice(4,6));var r2 = hex2dec(end.slice(0,2)),   g2=hex2dec(end.slice(2,4)),   b2=hex2dec(end.slice(4,6));var pc = percent/100;var r  = Math.floor(r1+(pc*(r2-r1)) + .5), g=Math.floor(g1+(pc*(g2-g1)) + .5), b=Math.floor(b1+(pc*(b2-b1)) + .5);return("#" + dec2hex(r) + dec2hex(g) + dec2hex(b));}/************************************************/</SCRIPT><SCRIPT>var colors = new Array("339966", "FF0000", "00FF00", "0000FF", "FFFF00", "FF00FF", "00FFFF");var start  = colors[0];var end    = colors[0];var index  = 0;var cindex = 0;var faderObj = new Array();function fadeSpan(){if(index == 0){start = end;end = colors[ cindex = (cindex+1) % colors.length ];}//document.getElementById("fadingText").style.color = getColor(start, end, index);for(var i=0 ; i<faderObj.length ; i++)faderObj[i].style.color = getColor(start, end, index);index = (index+5) % 100;setTimeout("fadeSpan()", 40);}function fadeAll(){for(var i=0 ; i<arguments.length ; i++)faderObj[i] = document.getElementById(arguments[i]);fadeSpan();}function JSFX_StartEffects(){fadeAll("sp1","sp2");}</SCRIPT><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<BODY onload=JSFX_StartEffects()><SPAN id=sp2>Make any span</A></SPAN> a color cycling one.</BODY><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->