»

EnglishFrenchVietnamese

Print - LED Panel Marquee - JavaScriptBank.com

Full version: jsB@nk » Text » Imatitation » LED Panel Marquee
URL: https://www.javascriptbank.com/led-panel-marquee.html

A variable width/speed marquee HTML, marquee text with realistic multi-color LED digits. No fonts required, and it uses only a single 36Kb image.See also: LED Display Panel

Full version: jsB@nk » Text » Imatitation » LED Panel Marquee
URL: https://www.javascriptbank.com/led-panel-marquee.html

<style type="text/css"><!--.digit {  float: left;  width: 14px;  height: 26px;  margin-right: 2px;  background: #000 url(ledmarquee.gif) 0px 0px;}#ledmarquee {  height: 26px;  visibility: hidden;  background-color: #000;}#ledContainer {  background-color: #000;  padding: 5px;}--></style>

<script type="text/javascript"><!--// Created by: Curt Turner :: http://www.turner3d.net/// the number of characters in the displaymwidth=20;// delay in milliseconds between character shiftsmdelay=200;// set to true if you want to reduce multiple spaces to a single spacedumpExtraSpaces=false;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(/[nr]/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){  // prevent browser lockups if something goes fishy (open <)   alert('parse failure');   return false;  } } mcont="<div style='display:none'>"+mtxt+"<p>&nbsp;</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);  document.getElementById("ledContainer").style.width=(10+mwidth*16)+'px';}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>

<div id="ledmarquee">Multi-<red>C<blue>o<yellow>l<green>o<red>r<green>JavaScript LED marquee - IE & FF compatible - <yellow>nofonts required<green> - one image (36k) - user-defined speed& width - 012...789 abc...xyz +-*/=?^&().,'!$...</div>

/javascript/text/LED_Panel_Marquee/ledmarquee.gif