"Tạo dòng chữ chạy kiểu đánh văn bản"

(Traidatmui.com) – Hôm nay mình xin giới thiệu đến các bạn một thủ thuật khá hay và cũng khá đẹp mắt. Đó là việc tạo ra các dòng chữ tự động chạy như kiểu chúng ta đánh máy. Thủ thuật này sử dụng Javascript để tạo hiệu ứng. Nếu bạn thấy thích thú với thủ thuật này thì hãy xem các bước thực hiện bên dưới. Nó cũng rất đơn giản.

1. Đầu tiên đăng nhập vào blog
2. Vào bố cục tạo HTML/Javascript và thêm vào nó đoạn code sau
<script language="JavaScript1.2">

var line=new Array()
line[1]="Chào bạn đến với TRAIDATMUI.COM"
line[2]="Bạn sẽ tìm thấy nhiều điều thú vị"
line[3]="Chúc bạn một ngày vui vẻ"
line[4]="Hãy là người đầu tiên khám phá"

var ts_fontsize="16px"

var longestmessage=1
for (i=2;i<line.length;i++){
if (line[i].length>line[longestmessage].length)
longestmessage=i
}

var tscroller_width=line[longestmessage].length

lines=line.length-1

if (document.all||document.getElementById){
document.write('<form name="bannerform">')
document.write('<input type="text" name="banner" size="'+tscroller_width+'"')
document.write(' style="width:500px; background-color:#0000ff; color: #fff; font-family: verdana; font-size: 15px; font-weight:bold; border: 1px solid #ff6600;" onfocus="blur()">')
document.write('</form>')
}

temp=""
nextchar=-1;
nextline=1;
cursor="\\"
function animate(){
if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){
nextline++;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",1000)}
else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){
nextline=1;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",1000)}
else{
nextstep()}}

function nextstep(){

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


nextchar++;
temp+=line[nextline].charAt(nextchar);
document.bannerform.banner.value=temp+cursor
setTimeout("animate()",25)}

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

☼ Tùy chỉnh: Bạn hãy chỉnh sửacác dòng chữ màu xanh đậm ở trên lại thành những dòng chữ bạn muốn.
- Còn code màu xanh nhạt thì dành cho bạn tùy chỉnh màu nền, màu chữ, đường viền... Hãy dựa vào đó để chỉnh sửa cho phù hợp với blog của bạn.
Chúc bạn thành công

Xem khác cùng chủ đề

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang