TẠO CHỮ CHẠY KIỂU 2 LỚP

Posted by chiasedamme on Thursday, March 8, 2012

Các bạn có thể dùng thủ thuật này để thông báo đến khách tham quan những thông điệp bằng các dòng chữ chạy kiểu 2 lớp.
Mời các bạn bấm "Xem thử" phía dưới để thấy rõ hơn hiệu ứng này.



Xem thử


Thủ thuật này cũng khá đơn giản, bạn đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML/Javacript rồi dán đoạn code phía dưới vào.







<h2>
<script language="JavaScript1.2">
var message="dunghennessy xin chào các bạn, cám ơn các bạn đã ghé tham quan và ủng hộ dunghennessy.blogspot.com. Chúc các bạn luôn vui vẻ, hạnh phúc và gặt hái nhiều thành công trong công việc!"
var neonbasecolor="gray"
var neontextcolor="yellow"
var flashspeed=100  //in milliseconds
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)

function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}

function neon(){
if (n==0){
for (m=0;m<message.length;m++)
//eval("document.all.neonlight"+m).style.color=neonbasecolor
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}

function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()


</script>


Bây giờ, bạn có thể thay đổi các dòng chữ màu đỏ (đây là dòng chữ hiển thị) và màu vàng theo ý thích của mình, trong đó:
* var neonbasecolor="gray": màu của dòng chữ phía dưới.
* var neontextcolor="yellow": màu của dòng chữ chạy phía trên.
* var flashspeed=100  //in milliseconds: tốc độ chạy của chữ.
Và cuối cùng bấm Lưu rồi trở lại blog xem kết quả.
Chúc các bạn thành công!!!









{ 0 comments... read them below or add one }

Post a Comment