Multi Color LED Marquee - Create a Multi-color LED Marquee ticker for your page.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser
Example: View Code Demo
<html> <head> <title>Multi Color LED Marquee Javascript Code Snippet</title> <style> BODY {font-family:verdana,arial,ms sans serif; font-size:90%;} .digit {float:left; width:14px; height:26px; margin-right:2px; background:#000 url(images/ledmarquee.gif) 0px 0px;} #ledmarquee {height:26px; visibility:hidden; background-color:#000000;} </style> <script> /* // Begin Multi Color LED Marquee // == This Script Free To Use Providing This Notice Remains == // == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == // == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == // == Created by: Curt Turner | http://www.turner3d.net/ : Creative Commons License == */ mwidth=20; // the number of characters in the display mdelay=200; // delay in milliseconds between character shifts dumpExtraSpaces=false; // set to true if you want to reduce multiple spaces to a single space mpos=0; chars=" 0123456789abcdefghijklmnopqrstuvwxyz+-*/=?^&().,'!~$"; content=new Array(); color=new Array(); colors=new Array(); colors['green']=0; colors['yellow']=-27; colors['red']=-54; colors['blue']=-81; colorind=new Array(); colorind[0]='green'; var mtxt; function marqueeInit(){ mtxt=document.getElementById("ledmarquee").innerHTML.toLowerCase(); mtxt=mtxt.replace(/\.\.\./g,'~'); mtxt=mtxt.replace(/&/g,'&'); mtxt=mtxt.replace(/"/g,"'"); mtxt=mtxt.replace(/\[/g,'('); mtxt=mtxt.replace(/\]/g,')'); mtxt=mtxt.replace(/\{/g,'('); mtxt=mtxt.replace(/\}/g,')'); mtxt=mtxt.replace(/[\n\r]/g,' '); if(dumpExtraSpaces) mtxt=mtxt.replace(/\s{2,}/g,' '); bpos=mtxt.indexOf('<'); attempt=0; while(bpos>=0){ mtxt.search(/<([^>]*)>/); ctmp=RegExp.$1; colorind[bpos]=ctmp; mtxt=mtxt.replace(/<[^>]*>/,''); bpos=mtxt.indexOf('<'); attempt++; if(attempt>500){ alert('parse failure'); // prevent browser lockups if something goes fishy (open <) return false; } } mcont="<div style='display:none'>"+mtxt+"<p></p></div>"; for(i=0;i<mwidth;i++){ mcont+="<div class='digit' id='js_dig"+i+"'></div>\n"; mtxt=' '+mtxt+' '; } curcolor=0; for(i=0;i<mtxt.length;i++){ if(colorind[i-mwidth]!=null){ curcolor=colors[colorind[i-mwidth]]||0; } color[i]=curcolor; content[i]=-16*chars.indexOf(mtxt.substr(i,1)); } document.getElementById("ledmarquee").style.width=(mwidth*16)+'px'; document.getElementById("ledmarquee").innerHTML=mcont; document.getElementById("ledmarquee").style.visibility='visible'; mtimer=setInterval('marqueeScroll()',mdelay); } function marqueeScroll(){ for(i=0;i<mwidth;i++){ document.getElementById('js_dig'+i).style.backgroundPosition=content[i+mpos]+'px '+color[i+mpos]+'px'; } mpos++; if(mpos==mtxt.length-mwidth) mpos=0; } function onloadAppend(func){ var oldonload=window.onload; if(typeof window.onload!='function'){ window.onload=func; } else { window.onload=function(){ if(oldonload) { oldonload(); } func(); } } } onloadAppend(marqueeInit); </script> </head> <body> <div id="ledmarquee">Multi-<red>C<blue>o<yellow>l<green>o<red>r<green> JavaScript LED marquee - IE - FF - Chrome - Safari - Opera compatible - <yellow>no fonts required <green>- one image (36k) - user defined speed and width - 012...789 abc...xyz +-*/=?^&().,'!$...</div> <p>Replace the 'ledmarquee.gif' image with your own, or use this one below:<br /> <img src="images/ledmarquee.gif" border="1"> (right click - save as)</p> <p>Adjust the STYLES to suit your needs.</p> <p>You can transfer the 'javascript' code to an external file to minify your page size.</p> <br /><br /> <div id="snippet"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_33.html">Multi Color LED Marquee</a> page. ] </div> </body> </html>