Thuộc tính chạy chữ trong html

Thuộc tính của html có lẽ chúng ta đã nắm được gần như tương đối, qua các bài viết về HTML là gì, HTML cơ bản, cách dùng thẻ html thì các bạn nắm rõ, hôm nay mình sẽ nói về thuộc tính chữ chạy trong html. Cách dùng này có vẻ khá là ít được sử dụng nhưng cũng nên tìm hiểu nhé các bạn.

 

havanhan.com

Hiện nay thì trong khi thiết kế website thì ít khi người ta sử dụng marquee nữa vì hầu hết đã sử dụng java script để chạy slideshow.

Thẻ <marquee> sẽ làm chạy hầu hết các đối tượng trong thẻ như: Text, ảnh, các định dạng khác.

Cú pháp sử dụng: <marquee> havanhan.com </marquee>

Một số các thuộc tính thường dùng của lệnh marquee:

– BGCOLOR=”color” → tạo màu nền cho vùng hiện thị lệnh marquee (có thể dùng hình nền…).
– DIRECTION=”left/right/up/down” → chọn hình thức chạy chữ ( trái, phải, lên, xuống…)
– BEHAVIOR=”scroll/slide/alternate” → thiết lập kiểu chạy chữ .

Scroll → di chuyển tuần tự.
Slide → di chuyện 1 thời gian, sau đó dừng lại.
Alternate → di chuyển từ trái sang phải sau đó dừng lại.

– TITLE=”message” → Một đọan tin nhắn nhỏ được hiển thị khi người dùng rê chuột vào.
– SCROLLMOUNT=”number” → điều chỉnh tốc độ chạy
– SCROLLDELAY=”number” → chỉnh thời gian hiển thị (tính bằng giây)
– LOOP=”number|-1|infinite” → to manage sum of looping.
– WIDTH=”number” → chỉnh độ rộng của vùng chạy chữ. Có thể dùng đơn vị pixel (px) hoặc phần trăm (%).

Bạn có thể thay đổi cách hướng chạy của chữ ví dụ như: chạy từ trên xuống, từ dưới lên, từ trái sang phải, từ phải sang trái.

Cách sử dụng như sau:

* Trường hợp 1: Di chuyển xuống dưới, dừng lại khi ta rê chuột vào, chạy tiếp khi rê chuột ra

Code:
<marquee onmouseover=”this.stop()” onmouseout=”this.start()” scrollamount=”2″ direction=”down” width=”100%” height=”100″ align=”center”>
Di chuyển xuống dưới,
dừng lại khi ta rê chuột vào,
chạy tiếp khi rê chuột ra
</marquee>
Kết quả hiển thị
Di chuyển xuống dưới,
dừng lại khi ta rê chuột vào,
chạy tiếp khi rê chuột ra

Di chuyển xuống dưới,
dừng lại khi ta rê chuột vào,
chạy tiếp khi rê chuột ra

* Trường hợp 2: Chuyển động từ phải qua trái, độ rộng 100%, cao 100px, tốc độ chạy chữ là 2

Code:
<marquee align=”center” direction=”left” height=”100″ scrollamount=”2″ width=”80%”>
Chuyển động từ phải qua trái, độ rộng 80%, cao 100px, tốc độ chạy chữ là 2
</marquee>
Kết quả hiển thị
Chuyển động từ phải qua trái, độ rộng 80%, cao 100px, tốc độ chạy chữ là 2

* Trường hợp 3: Chạy chữ qua trái rồi quay lại qua phải (thuộc tính alternate)

Code:
<marquee align=”center” direction=”left” height=”200″ scrollamount=”4″ width=”80%” behavior=”alternate”>
Chạy chữ qua trái rồi quay lại qua phải (thuộc tính alternate)
</marquee>
Kết quả hiển thị

Chạy chữ qua trái rồi quay lại qua phải (thuộc tính alternate)

* Trường hợp 4: Chạy chữ với màu nền

Code:
<div align=”left”><font face=”georgia” color=”White”><b><marquee bgcolor=”red” width=”100%” scrollamount=”3″ behavior=”alternate”>
Chạy chữ với màu nền
</marquee></b></font></div>
Kết quả hiển thị

Chạy chữ với màu nền

Thẻ marquee còn hỗ trợ bạn các kiểu chạy:

• Slide: chỉ chạy 1 lần sau đó đứng im.
• scroll : Kiểu chạy bình thường.
• alternate: Kiểu chữ chạy đi chạy lại.

Cú pháp sử dụng:

• <marquee direction=”right” behavior=”alternate” > chữ chạy từ trái sang phải và có kiểu chạy đi chạy lại. </marquee>
Kết quả hiện thị
chữ chạy từ trái sang phải và có kiểu chạy đi chạy lại.

• <marquee direction=”right” behavior=”scroll” > chữ chạy từ trái sang phải và có kiểu chạy bình thường. </marquee>

chữ chạy từ trái sang phải và có kiểu chạy 1 lần sau đó đứng im.

Thay đổi tốc độ chạy với cú pháp sau đây:

<marquee direction=”right” behavior=”alternate” scrollamount=”100″> chữ chạy từ trái sang phải, kiểu chạy đi chạy lại và tốc độ chạy = 100 </marquee>

Thẻ marquee có 2 chế độ lặp:

• Để lặp 1 lần bạn sử dụng thuộc tính loop với giá trị =1
• Để lặp liên tục bạn sử dụng thuộc tính loop với giá trị =-1.

Cú pháp chế độ lặp:

• <marquee direction=”right”  scrollamount=”100″  loop=”-1″> chữ chạy từ trái sang phải, tốc độ chạy = 100, lặp liên tục </marquee>
• <marquee direction=”right”  scrollamount=”100″  loop=”-1″> chữ chạy từ trái sang phải, tốc độ chạy = 100, lặp 1 lần </marquee>

Di chuyển xuống dưới, dừng lại khi ta rê chuột vào, chạy tiếp khi rê chuột ra