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 , 27-04-2007
เป็นเอฟเฟกต์ข้อความแบบสลับตัวอักษร สามารถปรับความเร็วในการสลับตัวอักษรและกำหนดลิงค์ได้ ดูตัวอย่างได้ ที่นี่ ครับ

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

<script type="text/javascript">
// <![CDATA[
var speed=200; // ความเร็วในการสลับตัวอักษร (ยิ่งน้อยยิ่งเร็ว)
var alink="http://www.thaimisc.com"; // URL ของข้อความเวลาคลิ๊ก (ไม่ต้องเติมถ้าจะไม่ให้มี LINK)
/***************************
* Shuffle Text Effect *
*(c) 2003-6 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
***************************/
var shuffl, shftxt, c1, c2;
var shfpos=new Array();
window.onload=function() { if (document.getElementById) {
var sorpos=new Array();
var shft1, shft2;
shuffl=document.getElementById("shuffle");
if (!document.all) shuffl.style.position="relative"; // ie bug fix
shftxt=shuffl.firstChild.nodeValue;
shftxt=shftxt.replace(/ /g, String.fromCharCode(160));
while (shuffl.childNodes.length) shuffl.removeChild(shuffl.childNodes[0]);
for (var i=0; i<shftxt.length; i++) {
shft1=document.createElement("span");
shft1.setAttribute("id", "shuf"+i);
shft1.style.position="relative";
shft1.appendChild(document.createTextNode(shftxt.charAt(i)));
if (alink) {
shft1.onclick=function() { top.location.href=alink };
shft1.style.cursor="pointer";
}
shuffl.appendChild(shft1);
}
sorpos[-1]=0;
for (i=0; i<shftxt.length; i++) {
shfpos[i]=i;
sorpos[i]=sorpos[i-1]+getElWidth(document.getElementById("shuf"+i));
}
for (i=0; i<shftxt.length; i++) {
shft2=Math.floor(Math.random()*(shftxt.length));
shft1=shfpos[i];
shfpos[i]=shfpos[shft2];
shfpos[shft2]=shft1;
}
shft1=0;
for (i=0; i<shftxt.length; i++) {
shft2=document.getElementById("shuf"+shfpos[i]);
shft2.style.left=shft1-sorpos[shfpos[i]-1]+"px";
shft1+=getElWidth(shft2);
}
unshuffle();
}}
function unshuffle() {
var shft1, shft2, rpos, go=0;
for (var i=0; i<shftxt.length; i++) if (shfpos[i]!=i) go++;
if (go) {
do {
rpos=Math.floor(Math.random()*(shftxt.length-1));
shft1=shfpos[rpos];
shft2=shfpos[rpos+1];
} while (shft1<shft2);
shfpos[rpos+1]=shft1;
shfpos[rpos]=shft2;
c1=document.getElementById("shuf"+shft1);
shft1=getElWidth(c1);
c2=document.getElementById("shuf"+shft2);
shft2=getElWidth(c2);
for (i=0; i<shft2; i++) setTimeout('c1.style.left=(parseInt(c1.style.left)+1)+"px"', speed/shft2*i);
for (i=0; i<shft1; i++) setTimeout('c2.style.left=(parseInt(c2.style.left)-1)+"px"', speed/shft1*i);
setTimeout('unshuffle()', speed);
}
}
function getElWidth(el) {
if (el.style.width) return parseInt(el.style.width);
else if (el.offsetWidth) return el.offsetWidth;
else if (el.clientWidth) return el.clientWidth;
else return false;
}
// ]]>
</script>



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

<font face="MS Sans Serif" size="2">
<!-- ใส่ข้อความที่ต้องการด้านล่างครับ (ภาษาไทยใช้ไม่ได้) -->
<span id="shuffle">Welcome To My Homepage</span>
</font>



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