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
Hiệ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
<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--><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--><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-->