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

Code 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.
Xem demo ở đây: LIVE Demo
☼ Sau đây là code của thủ thuật:
<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 Thủ thuật blog Violet - <b>Trongbang-studio</b>"
ts_line[2]="BlOg được thành lập với niềm đam mê của bản thân về thế giới mạng"
ts_line[3]="Với tinh thần giúp đỡ, cùng nhau phát triển cộng đồng <b>Blog Violet Việt Nam</b>"
ts_line[4]="<b>Thủ thuật blog Violet </b> sẵn sàng giúp đỡ các bạn trong việc thiết kế, chỉnh sửa blog"
ts_line[5]="Với hơn <b>200 thủ thuật</b> cho blog Violet từ dễ đến khó"
ts_line[6]="Và những hướng dẫn rất cụ thể và chi tiết"
ts_line[7]="Hy vọng <b>Thủ thuật blog Violet </b> sẽ là địa điểm dừng chân cho các <b>Blog violet Việt</b>"
ts_line[8]="<b>WELCOME TO Thủ thuật blog Violet </b>"
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
<!–
//–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=””;
}
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=””;
}
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.