Nói về Marquee thì chắc các bạn ít nhiều đã biết qua trên hệ điều hành windown XP xưa kia đã có hiệu ứng này rồi. Tuy đơn giản nhưng rất cần đối với người thiết kế website.
Đây là hiệu ứng đơn giản nhất mà ngôn ngữ HTML hỗ trợ. Nếu sử dụng tốt, đúng chỗ nó sẽ mang lại nhiều lợi ích, hiệu quả cho trang web của bạn. Thẻ MARQUEE cùng với các thuộc tính của nó cho phép đoạn text, đoạn văn bản của trang web chạy từ trên xuống, từ trái qua phải , chạy chéo và ngược lại… và hôm nay mình gửi đến các bạn những thuộc tính cơ bản của thẻ MARQUEE như sau:
ALIGN=”left/right/top/middle/bottom”: Canh hàng văn bản so với khung chứa văn bản đó.
BEHAVIOR=”scroll/slide/alternate”: Chỉ định kiểu chạy chữ.
SCROLL (mặc nhiên): Dóng chữ chạy theo một hướng nhất định và lập đi lập lại quá trình đó.
SLIDE: Chớp, tắt.
ALTERNATE: Dòng chữ chạy đổi hướng khi đụng đướng biên của khung bao văn bản. <MARQUEE BEHAVIOR=ALTERNATE> Marquee will “bounce” across the screen</MARQUEE>
BGCOLOR=”#rrggbb|colour name”: Chỉ định màu nền cho khung chứa văn bản. <MARQUEE BGCOLOR=”#F0F8FF”>Nice Background colour!<MARQUEE>
DIRECTION=”left/right”: Chỉ định hướng chạy của dòng văn bản. Mậc định là từ phải qua trái.
HEIGHT=”value/value%”: Chỉ định độ cao của khung bao văn bản. Tính bằng pixels (HEIGHT=n) hay tỷ lệ so với cửa sổ (HEIGHT=n%).
WIDTH=”value|value%”: Chỉ định độ rộng.
HSPACE=”value”/ VSPACE=”value”: Chỉ định khoảng trống giữa <MARQUEE> đến Text bao quanh.
LOOP=”value/-1/infinite”: LOOP=n: Chỉ định số vòng lập lại. Nếu n=-1, hay LOOP=INFINITE là lập lại liên tục.
SCROLLAMOUNT=”value”: Chỉ định khoảng cách tính bằng pixels giữa các đoạn text cuộn.
SCROLLDELAY=”value”: Chỉ định khoảng thời gian giữa các đoạn text cuộn. Có tác dụng điều khiển thời gian. <MARQUEE SCROLLDELAY=1 SCROLLAMOUNT=75>I’m fast</MARQUEE>
Bạn có thể xác lập font cho marquee theo sở thích của mình.<FONT FACE=”Comic Sans MS”><MARQUEE>Hello</MARQUEE>
Một số mẫu code mà mình đã thực hiện, các bạn có thể copy về nghiên cứu nhé.
Chữ chạy từ trái qua phải:
<MARQUEE WIDTH=500px BEHAVIOR=SCROLL DIRECTION=RIGHT BGColor=green>websitequangngai.com -Wordpress – Joomla – Kiếm tiền Online – Tư vấn thương hiệu</MARQUEE>
Chữ chạy từ phải qua trái:
<MARQUEE WIDTH=400px BEHAVIOR=SCROLL DIRECTION=LEFT BGColor=yellow>websitequangngai.com – WordPress – Joomla – Kiếm tiền Online – Tư vấn thương hiệu</MARQUEE>
Nếu bạn muốn khi người dùng hover qua thì doạn text dừng lại thì các bạn chèn thêm thuộc tính onmouseover=”this.stop()” onmouseout=”this.start()” vào thẻ <MARQUEE>:
<MARQUEE WIDTH=500px BEHAVIOR=SCROLL onmouseover=”this.stop()” onmouseout=”this.start()” DIRECTION=RIGHT BGColor=green>websitequangngai.com – WordPress – Joomla – Kiếm tiền Online – Tư vấn thương hiệu</MARQUEE>.
Chúc các bạn thành công!