Tạo các dòng thông báo kiểu gõ văn bản

 Thông thường khi không muốn cho 1 đoạn văn bản nào đó chỉ hiển thị trên 1 dòng hoặc 1 khu vực nhỏ nào đó, ta thường dùng hiệu ứng chạy chữ để hiển thị nó. Với việc này các đoạn văn bản đó sẽ không chiếm nhiều không gian trong blog của bạn. Hôm nay mình sẽ giới thiệu 1 kiểu hiển thị khác, đó là kiểu hiển thị tương tự khi ta đánh văn bản.
☼ Sau đây là code của thủ thuật:
- Để thực hiện, bạn chỉ tạo 1 widget HTML/Javascript và việc dán toàn bộ code bên dưới vào :

<script language="JavaScript1.2">
var ts_line=new Array()
var ts_link=new Array()
ts_line[1]="Chào mừng các bạn đến với Blog Fishers Of Men"
ts_line[2]="Rất mong được sự ủng hộ của mọi người."
ts_line[3]="Với tinh thần giúp đỡ, cùng nhau phát triển công việc Chúa ngày càng lợi ra cho Vương quốc của Đức Chúa Trời"
ts_line[4]="Fishers Of Men sẵn sàng lắng nghe những góp ý của các bạn nhằm để Blog ngày càng hoàn thiện hơn"
ts_line[5]="Với những thủ thuật blog, Thánh kinh hàng ngày, và một số tin tức sự kiện nổi bật"
ts_line[6]="Fishers Of Men sẽ cố gắng, nỗ lực hết mình cho công việc của Chúa"
ts_line[7]="Hy vọng Fishers Of Men sẽ là địa điểm dừng chân cho các Blogger Việt"
ts_line[8]="WELCOME TO FISHERS OF MEN"


var ts_fontcolor="#FB6B01" // màu chữ
var ts_fontsize="10pt" //kích thước chữ
var ts_fontweight="normal" // độ đậm
var ts_fontfamily="Verdana" // font chữ
var ts_bgcolor="transparent" // màu nền
var ts_bordercolor="#cccccc" //màu của đường viền
var ts_bordersize="1px" //độ rộng của đường viền
var ts_borderstyle="solid" // style của đường viền
var ts_padding="5px" // căn lề
var ts_width="200px" // độ rộng của khung hiển thị
var ts_height="100px" // chiều cao của khung hiển thị
var ts_delay="3000" // thời gian giãn cách hiển thị các đoạn văn bản
var ts_speed="35" // tốc độ typing (tốc độ hiển thị các từ)
var ts_linespread="1.2"
var ts_rand=0

<!--

/*
Typing Scroller
Submitted by bengaliboy00@hotmail.com (hp: http://www.angelfire.com/nt/bengaliboy/)
With modifications by Dynamicdrive.com
For full source code, usage terms, and 100s more scripts, visit http://dynamicdrive.com
*/


//--Don't edit below this line

var longestmessage=1
for (i=2;i<ts_line.length;i++){
if (!ts_line[i] ) {ts_line[i] = ''; ts_link[i] = '#';}
if (ts_line[i].length>ts_line[longestmessage].length)
longestmessage=i
}


//Auto set scroller width
var tscroller_width=ts_line[longestmessage].length

lines=ts_line.length-1 //--Number of lines

counter123 = 0;
temp=""
nextchar=-1;

var shown = new Array();
for (i = 1; i <= lines; i++ ) {
shown[i] = 0;
}

function checkshown() {
var num = 0;
for (i = 1; i<= lines; i++){
if (shown[i]) num++;
}

if ((num > (lines - 2))||(lines < 2)) {

for (i = 1; i <= lines; i++ ) {
shown[i] = 0;
}
}

return;

}

if (ts_rand == 1) {
checkshown();
do{
nextline=Math.floor(Math.random() * (lines + 1)); //1;
} while (shown[nextline] != 0);
shown[nextline] = 1;
} else {
nextline = 1;
}

cursor="\\"

//if IE 4+ or NS6
if (document.all||document.getElementById){
document.write('<table style="width: '+ts_width+'; height: '+ts_height+';">')

document.write('<tr><td')
document.write(' style=" cursor:hand; background-color: '+ts_bgcolor+'; color: '+ts_fontcolor+'; font-family: '+ts_fontfamily+'; font-size: '+ts_fontsize+'; font-weight:'+ts_fontweight+'; border-color: '+ts_bordercolor+'; border-style: '+ts_borderstyle+'; border-width: '+ts_bordersize+'; padding: '+ts_padding+'; width: '+ts_width+'; height: '+ts_height+'; text-align:left; vertical-align:top; " onfocus="blur()" ')
document.write('<a onclick="document.location=this.href;" id="banner_xyz_scroller" ')
document.write(' style="line-height: '+ts_linespread+'; color: '+ts_fontcolor+'; font-family: '+ts_fontfamily+'; font-size: '+ts_fontsize+'; font-weight:'+ts_fontweight+'; " ')
document.write (' href="javascript: void(0);"></a>')
document.write('</td></tr></table>')
}
var scroller = document.getElementById("banner_xyz_scroller");

function animate(){

if (temp==ts_line[nextline] & temp.length==ts_line[nextline].length & nextline!=lines){
if (ts_link[nextline]) {
//scroller.href="index.php?option=com_content&task=view&id="+ ts_link[nextline];
scroller.href="http://luyenthianhvan.org";
}

if (ts_rand == 1) {
checkshown();
do {
nextline = Math.floor(Math.random() * (lines + 1)); //nextline++;
}while (shown[nextline] != 0);
shown[nextline] = 1;
} else {
nextline++;
}

nextchar=-1;

scroller.innerHTML=temp;

temp="";
setTimeout("nextstep()",ts_delay)}
else if (nextline==lines & temp==ts_line[nextline] & temp.length==ts_line[nextline].length){
if (ts_link[nextline]) {
//scroller.href="index.php&id="+ ts_link[nextline];
scroller.href="http://luyenthianhvan.org";
}

if (ts_rand == 1) {
checkshown();
do{
nextline= Math.floor(Math.random() * (lines + 1)); //1;
}while (shown[nextline] != 0);
shown[nextline] = 1;
} else {
nextline = 1;
}

nextchar=-1;
scroller.innerHTML=temp;

temp="";
setTimeout("nextstep()",ts_delay)}
else{
nextstep()}}

function nextstep(){

if (cursor=="\\"){
cursor="|"}
else if (cursor=="|"){
cursor="/"}
else if (cursor=="/"){
cursor="-"}
else if (cursor=="-"){
cursor="\\"
}


nextchar++;
temp+=ts_line[nextline].charAt(nextchar);


scroller.innerHTML=temp+cursor
setTimeout("animate()",ts_speed)}

//if IE 4+ or NS6
if (document.all||document.getElementById)
window.onload=animate
// -->
</script>


- ts_line[1], ts_line[2], ... là các đoạn văn bản sẽ hiển thị. Nếu bạn không muốn nó hiển thị nhiều lần thì gộp chung tất cả lại thành 1.
- Hãy dựa vào các code chú thích màu xanh để chỉnh sửa cho khung hiển thị. Có thể xóa các code chú thích màu xanh này đi khi thực hiện.
Tags: ,

About author

Hy vọng các bạn ủng hộ cho blog Fishers Of Men và những đóng góp của các bạn trong các bài đăng có thể để vào phần comment phía dưới mỗi bài đăng. Xin chân thành cảm ơn các bạn. Chúa ban phước cho các bạn.

Nhập email của bạn:

*Xin vui lòng bấm vào liên kết xác nhận gửi trong thư mục Thư rác của Email*