Thaimisc.com : ทำข้อความวิ่งแบบพื้นหลังเป็นแถบลายจุด
ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us | Colocation | Web Hosting | เปิดร้านค้าฟรี


Category : Today's Tips Print Article Only Print Aticle With Comment
ทำข้อความวิ่งแบบพื้นหลังเป็นแถบลายจุด
เขียนโดย Poj , 24-11-2006
ทำข้อความวิ่งแบบพื้นหลังเป็นแถบลายจุด สามารถเปลี่ยนของสีของข้อความและพื้นหลังได้ ดูตัวอย่างได้ ที่นี่ ครับ

1.นำโค้ดส่วนนี้ไปใส่ไว้ใน <body>....</body> ครับ

<script language="JavaScript">
//____________________ เริ่มต้นส่วนที่ให้มีการแก้ไข ____________________

var message="WELCOME TO MY THAIMISC"; // พิมพ์ข้อความที่จะให้แสดงที่นี่ครับ เป็นภาษาอังกฤษเท่านั้นนะครับ
(พิมพ์เสร็จแล้วเว้นวรรคไว้ด้วยนะครับ ตัวอักษรจะได้ไม่ติดกัน)

var LEDonColor='#ff3300'; // รหัสสีของข้อความในแถบครับ

var LEDoffColor='#ffffff'; // รหัสสีพื้นหลังของแถบครับ

startXPos=(screen.width/2)-95; // ตำแหน่งให้แสดงแถบจากด้านขวาครับ (เลขยิ่งน้อยยิ่งไปทางขวา) และ
หน้าตัวเลขต้องมีเครื่องหมาย - ด้วยครับ ให้เปลี่ยนเลขแค่ตรงเลข 300 ครับ

startYPos=20; // ตำแหน่งให้แสดงแถบเลื่อนจากด้านบน (เลขยิ่งมายิ่งอยู่ต่ำ)

//____________________ จบส่วนที่ให้มีการแก้ไข ____________________
var IE=(document.all) ? true:false; var NS=(document.layers) ? true:false; var W3C=((document.getElementById) && (!IE)) ? true:false;

var d=document; if (window.offscreenBuffering) window.offscreenBuffering = true;

function getCSS(id) {

if (IE) return d.all[id] //IE

else if (NS) return d.layers[id] //NS4

else return d.getElementById(id)//W3C

}

var alphabet=new Array(44);

alphabet[0]=new Array("0111111","1001000","1001000","1001000","0111111");
alphabet[1]=new Array("1111111","1001001","1001001","1001001","0110110");//B

alphabet[2]=new Array("0111110","1000001","1000001","1000001","0100010");
alphabet[3]=new Array("1111111","1000001","1000001","1000001","0111110");//D

alphabet[4]=new Array("1111111","1001001","1001001","1001001");
alphabet[5]=new Array("1111111","1001000","1001000","1001000");//F

alphabet[6]=new Array("0111110","1000001","1000001","1001001","0101110");
alphabet[7]=new Array("1111111","0001000","0001000","0001000","1111111");//H

alphabet[8]=new Array("1000001","1111111","1000001");
alphabet[9]=new Array("0000110","0000001","0000001","0000001","1111110");//J

alphabet[10]=new Array("1111111","0001000","0010100","0100010","1000001");
alphabet[11]=new Array("1111111","0000001","0000001","0000001");//L

alphabet[12]=new Array("1111111","0010000","0001000","0010000","1111111");
alphabet[13]=new Array("1111111","0010000","0001000","0000100","1111111");//N

alphabet[14]=new Array("0111110","1000001","1000001","1000001","0111110");
alphabet[15]=new Array("1111111","1001000","1001000","1001000","0110000");//P

alphabet[16]=new Array("0111110","1000001","1000001","1000011","0111111");
alphabet[17]=new Array("1111111","1001000","1001100","1001010","0110001");//R

alphabet[18]=new Array("0110010","1001001","1001001","1001001","0100110");
alphabet[19]=new Array("1000000","1000000","1111111","1000000","1000000");//T

alphabet[20]=new Array("1111110","0000001","0000001","0000001","1111110");
alphabet[21]=new Array("1110000","0001100","0000011","0001100","1110000");//V

alphabet[22]=new Array("1111110","0000001","0000010","0001100","0000010","0000001","1111110");
alphabet[23]=new Array("1100011","0010100","0001000","0010100","1100011");//X

alphabet[24]=new Array("1100000","0010000","0001111","0010000","1100000");
alphabet[25]=new Array("1000011","1000101","1001001","1010001","1100001");//Z

alphabet[26]=new Array("0000000","0000000","0000000","0000000");
alphabet[27]=new Array("0000000","0000001","0000000","0000000","0000000");//PERIOD

alphabet[28]=new Array("0000000","0000000","1111101","0000000","0000000");//!

alphabet[29]=new Array("0100001","1111111","0000001");
alphabet[30]=new Array("0100011","1000101","1001001","1001001","0110001");//2

alphabet[31]=new Array("0100010","1001001","1001001","1001001","0110110");
alphabet[32]=new Array("0001000","0011000","0101000","1111111","0001000");//4

alphabet[33]=new Array("1111001","1001001","1001001","1001001","1000110");
alphabet[34]=new Array("0111110","1001001","1001001","1001001","0100110");//6

alphabet[35]=new Array("1000011","1000100","1001000","1110000");
alphabet[36]=new Array("0110110","1001001","1001001","1001001","0110110");//8

alphabet[37]=new Array("0110010","1001001","1001001","1001001","0111110");
alphabet[38]=new Array("0000001","0000010","0000000");//COMMA

alphabet[39]=new Array("XXXXXXX");//PAUSE ( @ )

alphabet[40]=new Array("YYYYYYY");//FLASH ( # )

alphabet[41]=new Array("DDDDDDD");//SCROLL UP EFFECT ( ^ )

alphabet[42]=new Array("SSSSSSS");//SUN EFFECT ( _ )

alphabet[43]=new Array("0100000","1000000","1001101","1001000","0110000");//?

alphabet[44]=new Array("QQQQQQQ");//SPLIT EFFECT ( $ )

 

message=message.toUpperCase(); //make message uppercase

var messageArray=new Array(); //make messageArray-an array of the letters in the message

var columnCount=0; //variable to count columns in messageArray.length

for (i=0; i<message.length; i++){ //iterate through the characters in the message

letterNum=message.charCodeAt(i); //assign proper letter code (alphabet array)

if ((letterNum>=65) && (letterNum<=90)) temp=letterNum-65; //letters

else if (letterNum==46) temp=27; //.

else if (letterNum==32) temp=26; //space

else if (letterNum==33) temp=28; //!

else if ((letterNum>=49) && (letterNum<=57)) temp=letterNum-20; //[1-9]

else if (letterNum==48) temp=14; //zero

else if (letterNum==63) temp=43; //?

else if (letterNum==44) temp=38; //,

else if (letterNum==64) temp=39; //pause

else if (letterNum==35) temp=40; //flash effect

else if (letterNum==94) temp=41; //scroll up effect

else if (letterNum==95) temp=42; //sunrise effect

else if (letterNum==36) temp=44; //split effect

else continue;

for (ii=0; ii<alphabet[temp].length;ii++){ messageArray[columnCount]=alphabet[temp][ii];columnCount++;}

if ((temp!=39) && (temp!=40) && (temp!=41)) {messageArray[columnCount]="0000000";columnCount++;}

}

//make 'led screen' with block 0-49 on row 1, block 50-99 on row 2, block 100-149 on row 3, etc..

var b='';

for (var i=0; i<350; i++){//columns 50 columns x 7 rows

rowPos=0+3*(i>49)+3*(i>99)+3*(i>149)+3*(i>199)+3*(i>249)+3*(i>299);

colPos=0+150*(i>49)+150*(i>99)+150*(i>149)+150*(i>199)+150*(i>249)+150*(i>299);

b+= (NS) ? '<LAYER NAME="block' + i + '" LEFT="' + (startXPos+i*3-colPos) + '" TOP="' + (startYPos+rowPos) +
'" VISIBILITY="show" WIDTH="2" HEIGHT="2" BGCOLOR="' + LEDoffColor + '"></LAYER>' : '<div id="block' + i +
'" style="position:absolute; left:' + (startXPos+i*3-colPos) + 'px; top:' + (startYPos+rowPos) +
'px; background-color:' + LEDoffColor +'; height: 2px; width: 2px;font-size:2px;"></div>';

}

document.write(b);

var columnCounter=0; //keep track of postion of messageArray

var bb=new Array(); //store particular LED's dom element here

if (NS) { for (var i=0; i<350; i++) { bb[i]=getCSS("block"+i)}}

else {for (var i=0; i<350; i++){ bb[i]=getCSS("block"+i).style;}}

var isOn=new Array();for (var i=0; i<350; i++){ isOn[i]=0;} //keep track on on/off status of particular LED

onArray=new Array(); var onCount=0; //array size counter

function scroll(){

onCount=0;

if (NS) { for (var i=0; i<301; i+=50){ if (isOn[i]==1) { bb[i].bgColor=LEDoffColor; isOn[i]=0;} for (var ii=1; ii<50; ii+=7){

temp=i+ii;temp1=temp+1;temp2=temp+2;temp3=temp+3;temp4=temp+4;temp5=temp+5;temp6=temp+6;

if (isOn[temp]==1) {bb[temp].bgColor=LEDoffColor; isOn[temp]=0; bb[temp-1].bgColor=LEDonColor; isOn[temp-1]=1;}

if (isOn[temp1]==1) {bb[temp1].bgColor=LEDoffColor; isOn[temp1]=0; bb[temp].bgColor=LEDonColor; isOn[temp]=1;}

if (isOn[temp2]==1) {bb[temp2].bgColor=LEDoffColor; isOn[temp2]=0; bb[temp+1].bgColor=LEDonColor; isOn[temp+1]=1;}

if (isOn[temp3]==1) {bb[temp3].bgColor=LEDoffColor; isOn[temp3]=0; bb[temp2].bgColor=LEDonColor; isOn[temp2]=1;}

if (isOn[temp4]==1) {bb[temp4].bgColor=LEDoffColor; isOn[temp4]=0; bb[temp3].bgColor=LEDonColor; isOn[temp3]=1;}

if (isOn[temp5]==1) {bb[temp5].bgColor=LEDoffColor; isOn[temp5]=0; bb[temp4].bgColor=LEDonColor; isOn[temp4]=1;}

if (isOn[temp6]==1) {bb[temp6].bgColor=LEDoffColor; isOn[temp6]=0; bb[temp5].bgColor=LEDonColor; isOn[temp5]=1;}

}}}

else { for (var i=0; i<301; i+=50){ if (isOn[i]==1) { bb[i].backgroundColor=LEDoffColor; isOn[i]=0;} for (var ii=1; ii<50; ii+=7){

temp=i+ii;temp1=temp+1;temp2=temp+2;temp3=temp+3;temp4=temp+4;temp5=temp+5;temp6=temp+6;

if (isOn[temp]==1) {bb[temp].backgroundColor=LEDoffColor; isOn[temp]=0; bb[temp-1].backgroundColor=LEDonColor; isOn[temp-1]=1;}

if (isOn[temp1]==1) {bb[temp1].backgroundColor=LEDoffColor; isOn[temp1]=0; bb[temp].backgroundColor=LEDonColor; isOn[temp]=1;}

if (isOn[temp2]==1) {bb[temp2].backgroundColor=LEDoffColor; isOn[temp2]=0; bb[temp+1].backgroundColor=LEDonColor; isOn[temp+1]=1;}

if (isOn[temp3]==1) {bb[temp3].backgroundColor=LEDoffColor; isOn[temp3]=0; bb[temp2].backgroundColor=LEDonColor; isOn[temp2]=1;}

if (isOn[temp4]==1) {bb[temp4].backgroundColor=LEDoffColor; isOn[temp4]=0; bb[temp3].backgroundColor=LEDonColor; isOn[temp3]=1;}

if (isOn[temp5]==1) {bb[temp5].backgroundColor=LEDoffColor; isOn[temp5]=0; bb[temp4].backgroundColor=LEDonColor; isOn[temp4]=1;}

if (isOn[temp6]==1) {bb[temp6].backgroundColor=LEDoffColor; isOn[temp6]=0; bb[temp5].backgroundColor=LEDonColor; isOn[temp5]=1;}

}}}

temp=messageArray[columnCounter]; flag=temp.charAt(0);//GET NEW COLUMN

if (temp.charAt(1)=="1") {isOn[99]=1;} if (temp.charAt(2)=="1") {isOn[149]=1} if (temp.charAt(3)=="1") {isOn[199]=1}

if (temp.charAt(4)=="1") {isOn[249]=1} if (temp.charAt(5)=="1") {isOn[299]=1} if (temp.charAt(6)=="1") {isOn[349]=1}

if (flag=="0") {} else if (flag=="1") {isOn[49]=1;} else if (flag=="X") {pauseScroll();} else if (flag=="Y") {flashScroll();}

else if (flag=="D") {dropEffect();} else if (flag=="S") {sunRiseEffect();} else if (flag=="Q") {splitEffect();}

columnCounter++; if(columnCounter==columnCount) columnCounter=0;

}

//______________pause effect________________

function pauseScroll(){ clearInterval(loop); setTimeout("init()",3000);}

//______________onArray Section_____________

onArray=new Array(); var onCount=0; //array size counter

function makeOnArray(){ clearInterval(loop); onCount=0; for (var i=0; i<700; i++){if (isOn[i]==1)
{onArray[onCount]=i; onCount++;};}//make onArray of 'on' LEDS

}//_________________________________

//_______________flash effect_______________

var flashCount=0;

function flashScroll(){ makeOnArray(); flashCount=0; if (NS) {setTimeout("flashItNS()",250);} else {setTimeout("flashIt()",250);}}

function flashItNS(){ flashCount++;

if (flashCount<14) {

if (flashCount % 2 == 0){ for (var i=0; i<onCount; i++){ isOn[onArray[i]]=0;bb[onArray[i]].bgColor=LEDoffColor;}}

else {for (var i=0; i<onCount; i++){isOn[onArray[i]]=1;bb[onArray[i]].bgColor=LEDonColor;}}

setTimeout("flashItNS()",250);

}

else {flashCount=0; setTimeout("init()",250);}

}

function flashIt(){ flashCount++;

if (flashCount<14) {

if (flashCount % 2 == 0){ for (var i=0; i<onCount; i++){ isOn[onArray[i]]=0;bb[onArray[i]].backgroundColor=LEDoffColor;}}

else {for (var i=0; i<onCount; i++){isOn[onArray[i]]=1;bb[onArray[i]].backgroundColor=LEDonColor;}}

setTimeout("flashIt()",250);

}

else {flashCount=0; setTimeout("init()",250);}

}//_________________________________

//____________scroll up effect______________

dropArray=new Array();

function dropEffect(){makeOnArray(); for (var i=0; i<onCount; i++){ dropArray[i]=onArray[i]; } if (NS) {dropItNS();} else {dropIt();}}

var dropCount=0;

function dropItNS(){

if (dropCount<7){for (var i=0; i<onCount; i++){ bb[dropArray[i]].bgColor=LEDoffColor; }

for (var i=0; i<onCount; i++){ temp=dropArray[i]; temp-=50;if (temp<0) temp+=350;bb[temp].bgColor=LEDonColor; dropArray[i]=temp;}

dropCount++; setTimeout("dropItNS()",100);

} else {dropCount=0;setTimeout("init()",100);}

}//_________________________________

function dropIt(){

if (dropCount<7){ for (var i=0; i<onCount; i++){ bb[dropArray[i]].backgroundColor=LEDoffColor; }

for (var i=0; i<onCount; i++){ temp=dropArray[i]; temp-=50; if (temp<0) temp+=350; bb[temp].backgroundColor=LEDonColor; dropArray[i]=temp;}

dropCount++; setTimeout("dropIt()",100);

} else {dropCount=0;setTimeout("init()",100);}

}//_________________________________

//____________sunrise effect________________

sunRiseCounter=0;sunRiseArray=new Array();

sunRiseArray[0]=new Array(50,101,102,103,154,155,156,207,208,259,260,261,212,163,164,115,116,117,168,169,170,221,222,223,274,275,276,227,228,179,180,131,132,83,134,135,186,187,238,239,240,241,292,293,344,295,296,247,198);//Hills

sunRiseArray[1]=new Array(224,225,226); sunRiseArray[2]=new Array(174,175,176,177); sunRiseArray[3]=new Array(173,124,125,126,127,128,178); sunRiseArray[4]=new Array(172,123,74,75,76,77,129); sunRiseArray[5]=new Array(171,122,73,24,25,26,27,78,79,130);

function sunRiseEffect() { makeOnArray(); for (var i=0; i<onCount; i++){ isOn[onArray[i]]=0; if (!NS) {bb[onArray[i]].backgroundColor=LEDoffColor;} else {bb[onArray[i]].bgColor=LEDoffColor;}}

setTimeout("riseEffectUp()",1000);}

function riseEffectUp() {

if (!NS) { for (var ii=0; ii<sunRiseArray[sunRiseCounter].length; ii++) {isOn[sunRiseArray[sunRiseCounter][ii]]=1;bb[sunRiseArray[sunRiseCounter][ii]].backgroundColor=LEDonColor;}}

else {for (var ii=0; ii<sunRiseArray[sunRiseCounter].length; ii++) {isOn[sunRiseArray[sunRiseCounter][ii]]=1;bb[sunRiseArray[sunRiseCounter][ii]].bgColor=LEDonColor;}}

sunRiseCounter++; if (sunRiseCounter>5) {sunRiseCounter=5;setTimeout("riseEffectDown()",2000);} else {setTimeout("riseEffectUp()",250);}}

function riseEffectDown() {

if (!NS) {for (var ii=0; ii<sunRiseArray[sunRiseCounter].length; ii++) {isOn[sunRiseArray[sunRiseCounter][ii]]=0;bb[sunRiseArray[sunRiseCounter][ii]].backgroundColor=LEDoffColor;}}

else {for (var ii=0; ii<sunRiseArray[sunRiseCounter].length; ii++) {isOn[sunRiseArray[sunRiseCounter][ii]]=0;bb[sunRiseArray[sunRiseCounter][ii]].bgColor=LEDoffColor;}}

sunRiseCounter--; if (sunRiseCounter<1) {sunRiseCounter=0;setTimeout("init()",1500);}

else {setTimeout("riseEffectDown()",250);}

}//____________________________________

//____________split scroll effect___________

var splitCount=0;

function splitEffect() { makeOnArray(); for (var i=0; i<onCount; i++) { dropArray[i]=onArray[i]; }

if (NS) {setTimeout("splitNS()",55);} else if (IE) {setTimeout("splitIt()",55);} else {setTimeout("splitIt()",100);}

}

function splitIt(){ for (i=0;i<onCount;i++){ temp=dropArray[i];

if (temp<150) { if (temp==100) {bb[temp].backgroundColor=LEDoffColor; temp=149; bb[temp-1].backgroundColor=LEDonColor;}

else if (temp==50) {bb[temp].backgroundColor=LEDoffColor; temp=99; bb[temp-1].backgroundColor=LEDonColor;}

else if (temp==0) {bb[temp].backgroundColor=LEDoffColor; temp=49; bb[temp-1].backgroundColor=LEDonColor;}

else {bb[temp].backgroundColor=LEDoffColor; bb[temp-1].backgroundColor=LEDonColor;}

dropArray[i]=temp-1; }

else { if (temp==199) {bb[temp].backgroundColor=LEDoffColor; temp=200; bb[temp+1].backgroundColor=LEDonColor;}

else if (temp==349) {bb[temp].backgroundColor=LEDoffColor; temp=300; bb[temp+1].backgroundColor=LEDonColor;}

else if (temp==299) {bb[temp].backgroundColor=LEDoffColor; temp=250; bb[temp+1].backgroundColor=LEDonColor;}

else if (temp==249) {bb[temp].backgroundColor=LEDoffColor; temp=200; bb[temp+1].backgroundColor=LEDonColor;}

else {bb[temp].backgroundColor=LEDoffColor; bb[temp+1].backgroundColor=LEDonColor;}

dropArray[i]=temp+1; }

} splitCount++; if (splitCount<49) {if (IE) {setTimeout("splitIt()",55);} else {setTimeout("splitIt()",100);} } else {splitCount=0; init();}

}

function splitNS(){

for (i=0;i<onCount;i++){ temp=dropArray[i];

if (temp<150) { if (temp==100) {bb[temp].bgColor=LEDoffColor; temp=149; bb[temp-1].bgColor=LEDonColor;}

else if (temp==50) {bb[temp].bgColor=LEDoffColor; temp=99; bb[temp-1].bgColor=LEDonColor;}

else if (temp==0) {bb[temp].bgColor=LEDoffColor; temp=49; bb[temp-1].bgColor=LEDonColor;}

else {bb[temp].bgColor=LEDoffColor; bb[temp-1].bgColor=LEDonColor;}

dropArray[i]=temp-1; }

else { if (temp==199) {bb[temp].bgColor=LEDoffColor; temp=200; bb[temp+1].bgColor=LEDonColor;}

else if (temp==349) {bb[temp].bgColor=LEDoffColor; temp=300; bb[temp+1].bgColor=LEDonColor;}

else if (temp==299) {bb[temp].bgColor=LEDoffColor; temp=250; bb[temp+1].bgColor=LEDonColor;}

else if (temp==249) {bb[temp].bgColor=LEDoffColor; temp=200; bb[temp+1].bgColor=LEDonColor;}

else {bb[temp].bgColor=LEDoffColor; bb[temp+1].bgColor=LEDonColor;}

dropArray[i]=temp+1; }

} splitCount++; if (splitCount<49) {setTimeout("splitNS()",55);} else {splitCount=0; init();}

}//___________________________________

function init(){ if (NS) {loop=setInterval("scroll()",55);} else if (IE){loop=setInterval("scroll()",55);} else {loop=setInterval("scroll()",100);}}

</script>



.นำโค้ดส่วนนี้ไปใส่ไว้ใน <body> ครับ

<body onLoad="init()">


Credit : codetukyang
<- Back | Next ->

ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us
Copyright 1999-2006 Thailand Miscellaneous. Allrights reserved. webmaster@thaimisc.com