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

In - Chữ đóng hộp-đèn chạy qua lại - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Chữ » Chữ kiểu karaoke » Chữ đóng hộp-đèn chạy qua lại
URL: https://www.javascriptbank.com/mod-styles-text-effect.html

Chữ đóng hộp-đèn chạy qua lại © JavaScriptBank.comHiệu ứng tạo ra một dòng chữ với các kí tự được đóng khung và màu nền của khung thay đổi chạy qua, lại trên dòng chữ.

Phiên bản đầy đủ: jsB@nk » Chữ » Chữ kiểu karaoke » Chữ đóng hộp-đèn chạy qua lại
URL: https://www.javascriptbank.com/mod-styles-text-effect.html



CSS
<STYLE type=text/css>BODY {BACKGROUND-COLOR: black; TEXT-ALIGN: center}SPAN.dynamic {BACKGROUND-COLOR: white; BORDER-BOTTOM: gray 2px double; BORDER-LEFT: gray 2px double; BORDER-RIGHT: gray 2px double; BORDER-TOP: gray 2px double; COLOR: black}</STYLE><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<SCRIPT language=JavaScript type=text/javascript><!-- // - Style Mod JavaScript Text Effect // - Declare Variables: // - Colorsvar BGCOLOR1="white",COLOR1="black",BGCOLOR2="red",COLOR2="white";var LASTCOLOR="red";// - go tovar URL="http://JavaScriptBank.com";var message;var messageLen;var spans;// - global countersvar count=0/* - counter for span creation*/, gcount=0 /* - counter for moving through IDs*/, gcount2 /* - same as gcount. but moving backwards*/, gcount3=0, gcount4=0;// - Event Handlers:window.onload=main;// - Main Sub Routine:function main(){ // - Init Variables:  message=document.getElementById('prototypesid0').innerHTML;message=message.toUpperCase();messageLen=message.length;gcount2=message.length-1;// - Method Calls: CreatSpans();ResizeSpans();SequentiallyMove();}// - Other Sub Routines:function CreatSpans(){  for(var x=0;x<message.length;x++){   count=x+1;// - create element    spans=document.createElement('span');// - set IDs and Class Name  spans.id="sid"+x;  spans.className="dynamic";// - set Event Handlers:spans.onclick=RichardHucko;// - Set One Letter Per Span, if letter equals to white space make it equal to an underscore that is not visible in order to keep proper positioning.spans.innerHTML=(message.substring(count-1,count)==" ")?"<b style='visibility:hidden'>_</b>":message.substring(count-1,count);with(spans.style){  backgrounColor=BGCOLOR1;color=COLOR1;border="2 double";} // - append tag in bodydocument.body.appendChild(spans); }}function ResizeSpans(){ for(var cntAdd=0,cntSubtr=message.length;cntAdd<message.length;cntAdd++,cntSubtr--) {  with(document.getElementById('sid'+cntAdd).style){  fontSize=(cntAdd<((messageLen/2)-1))?eval((cntAdd+1)*10+10):eval((cntSubtr*10+10));} }} function SequentiallyMove(){ if(gcount<message.length) {  if(gcount>0){with(document.getElementById('sid'+(gcount-1)).style) {  backgroundColor=BGCOLOR1;color=COLOR1;border="2 double"; }}   with(document.getElementById('sid'+gcount).style) {  backgroundColor=BGCOLOR2;color=COLOR2;border="5 outset"; }  gcount++; } else if(gcount2>=0) {  if(gcount2<message.length-1)  {  with(document.getElementById('sid'+(gcount2+1)).style) {  backgroundColor=BGCOLOR1;color=COLOR1;border="2 double"; }}   with(document.getElementById('sid'+gcount2).style) {  backgroundColor=BGCOLOR2;color=COLOR2;border="5 outset"; }  gcount2--; } else if(gcount2==-1) { with(document.getElementById('sid'+(gcount2+1)).style)  {    backgroundColor=BGCOLOR1;  color=COLOR1;  border="2 double";  }gcount2=-2; } else if(gcount3<message.length) {   with(document.getElementById('sid'+(gcount3)).style)  {  color=LASTCOLOR;  border="none";  } gcount3++; } else if(gcount4<message.length) {    with(document.getElementById('sid'+(gcount4)).style)  {    backgroundColor="black";  } gcount4++; } setTimeout("SequentiallyMove();",100);}function RichardHucko(){  // - Move to Current URL  location.href=URL;// -  Move to Current URL}//--></SCRIPT><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<SPAN id=prototypesid0 style="DISPLAY: none">JavaScriptBank.com</SPAN><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->