PDA

Xem đầy đủ chức năng : Chữ cao dần


JavaScriptBank
02-10-2009, 08:32 AM
Hiệu ứng tạo ra các dòng chữ (http://www.javascriptbank.com/javascript/text/) xuất hiện trên trang web với kích thước tăng dần theo chiều cao.... chi tiết (http://www.javascriptbank.com/texttopper-bend-your-messages-up-and-down.html/vi//)


http://www.javascriptbank.com/javascript.images/text/texttopper-bend-your-messages-up-and-down.jpg (http://www.javascriptbank.com/texttopper-bend-your-messages-up-and-down.html/vi/)
Demo: Chữ cao dần (http://www.javascriptbank.com/javascript/text/texttopper-bend-your-messages-up-and-down/preview/vi/)

Cách cài đặt

Bước 1: Dùng mã JavaScript để cài đặt hiệu ứng
JavaScript

<SCRIPT>
<!-- Beginning of JavaScript -
// chu tao hieu ung
var message = new Array()
message[0]="Chu Lon Dan"
message[1]="jscollect.topcities.com"


// kich co cua vung ap dung hieu ung tuong ung voi font_size (pixels).
var scrollerheight=500
var scrollerwidth=1200

// font chu
var font_family="Verdana"


// kich co font
var font_size=100


// vi tri su dung hieu ung (pixel)
var x_textposition=10
var y_textposition=10

// Do not edit the variables below
var i_message=0
var i_loop=0
var max_loop=45
var timer
scrollerwidth=2*scrollerwidth
y_textposition=y_textposition-scrollerheight+font_size
x_textposition=x_textposition-Math.floor(scrollerwidth/2)


function initiate() {
if (document.all) {
document.all.rotationstyle.style.posLeft=x_textpos ition
document.all.rotationstyle.style.posTop=y_textposi tion
changemessage()
}
}

function changemessage() {
do_rotate="yes"
rotationstyle.innerHTML=
'<OBJECT ID="rotationobj" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6" STYLE="position:relative;width:'+scrollerwidth+'px;height :'+2*scrollerheight+'px">'+
'<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">'+
'<PARAM NAME="Line0002" VALUE="SetLineColor(255,255,255)">'+
'<PARAM NAME="Line0003" VALUE="SetFillColor(0,0,255)">'+
'<PARAM NAME="Line0004" VALUE="SetFont(\''+font_family+'\', '+font_size+', 400, 0, 0, 0)">'+
'<PARAM NAME="Line0005" VALUE="Text(\''+message[i_message]+'\',0, 2, 0)">'+
'</OBJECT>'
rotationobj.Rotate(-90,0,0)
startscroll()

}

function startscroll() {
if (i_loop < max_loop) {
rotationobj.Rotate(2,0,0)

i_loop++
timer=setTimeout("startscroll()",20)
}
else {
i_loop=0
timer=setTimeout("endscroll()",2000)
}
}

function endscroll() {
if (i_loop < max_loop) {
rotationobj.Rotate(-2,0,0)

i_loop++
timer=setTimeout("endscroll()",50)
}
else {
i_message++
i_loop=0
if (i_message>=message.length) {i_message=0}
timer=setTimeout("changemessage()",1000)
}
}

// - End of JavaScript - -->
</SCRIPT>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->


Bước 2: Đặt mã HTML bên dưới vào phần BODY
HTML

<BODY onload=initiate()>
<SPAN id=rotationstyle style="POSITION: absolute">
<OBJECT classid=CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6 id=rotationobj></OBJECT></SPAN>
</BODY>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->




Bạn có thể xem các mã tương tự bên dưới
- Thay đổi chữ bằng thuộc tính innerHTML (http://www.javascriptbank.com/change-text-by-using-innerhtml-property.html/vi/)
- Chữ động kiểu gõ phím (http://www.javascriptbank.com/typing-text-2.html/vi/)
- Chữ thông báo chớp giật (http://www.javascriptbank.com/blinker-news-ticker-3-0.html/vi/)
Bạn có thể xem thêm nhiều JavaScript khác về Chữ (http://www.javascriptbank.com/javascript/text/vi/)





Tạo menu luôn ở đầu trang (http://www.javascriptbank.com/vi=menu luôn ở đầu trang) - Tạo trình đơn động (http://www.javascriptbank.com/javascript/menu/vi/) - Cách loại bỏ dấu tiếng Việt với JavaScript (http://www.javascriptbank.com/forum/cach-loai-bo-dau-tieng-viet-t114.html)