×

Tạo hiệu ứng chữ chạy với javascript

Tạo hiệu ứng chữ chạy với javascript
Trong thiết kế blog/web,để blog/web thêm phần sinh động và đẹp mắt ta cũng cần sử dụng một số thủ thuật về hiệu ứng cho hình ảnh hoặc chữ đối với không những tiêu đề blog mà với bất cứ phần nào của blog mà ta muốn.
Dưới đây xin trình bầy một kiểu hiệu ứng chữ chạy sử dụng javascript cũng khá đẹp mắt.Tuy không phải là vấn đề mới mẻ nhưng chắc là có ích cho các bạn mới bước vào làm blog.

Xem thử:

Tạo hiệu ứng chữ chạy với javascript
Có thể bạn tiến hành thêm một tiện ích chứa chữ cần chạy hay vào chỗ đặt chữ cần chạy trong mẫu. Code: <div style=" font: normal bold 40px Times"> <script language="JavaScript1.2"> var message="Hiệu Ứng Chữ Chạy Với Javascript"//Chữ cần tạo hiệu ứng var neonbasecolor="#FFA500"//Mầu chữ ban đầu var neontextsize="40" var neontextcolor="#0000FF"//Hiệu ứng mầu 1 var neontextcolor2="#FFFFFF"//Hiệu ứng mầu 2 var flashspeed=100 //Tốc độ của hiệu ứng var flashingletters=3 // Số chữ thay đổi màu của lần 1 var flashingletters2=1 // Số chữ thay đổi màu của lần 2 var flashpause=0 // the pause between flash-cycles in milliseconds ///No need to edit below this line///// 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(){ //Change all letters to base color if (n==0){ for (m=0;m<message.length;m++) crossref(m).style.color=neonbasecolor } //cycle through and change individual letters to neon color crossref(n).style.color=neontextcolor if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2 if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor if (n<message.length-1) n++ else{ n=0 clearInterval(flashing) setTimeout("beginneon()",flashpause) return } } function beginneon(){ if (document.all||document.getElementById) flashing=setInterval("neon()",flashspeed) } beginneon() </script></div> Ta có thể tùy biến font chữ,kiểu chữ đậm và kích thước chữ tại thẻ:
<div style=" font: normal bold 40px Times">

Không có nhận xét nào:

Đăng nhận xét

Ads in post custom

Ads in post custom1

Ads in post custom2

Ads in post custom3