»
Tiếng AnhTiếng PhápTiếng Việt

In - Chữ chạy kiểu đèn LED - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Chữ » Mô phỏng » Chữ chạy kiểu đèn LED
URL: https://www.javascriptbank.com/led-panel-marquee.html

Chữ chạy kiểu đèn LED © JavaScriptBank.comMột hiệu ứng chạy trông như các quảng cáo bằng đèn LED nhiều màu mà ta thường thấy ở các đô thị lớn. Hiệu ứng không dùng phông chữ và chỉ dùng hình ảnh để hiển thị các kí tự.Bạn cũng có thể xem thêm hiệu ứng chữ chạy tương tự là Quảng cáo bằng đèn LED

Phiên bản đầy đủ: jsB@nk » Chữ » Mô phỏng » Chữ chạy kiểu đèn LED
URL: https://www.javascriptbank.com/led-panel-marquee.html



CSS
<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>


JavaScript
<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>


HTML
<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>


Files
/javascript/text/LED_Panel_Marquee/ledmarquee.gif