Cấu trúc code
<marquee scrollamount="3" direction="up" loop="50" scrolldelay="0" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()">
*** <br />*** <br />***
</marquee>
* Trong đó:
scrollamount và scrolldelay: là điều chỉnh thông số về tốc độ và thời gian.
direction: là hướng chạy của đối tượng mà ta cho chạy. có 4 hướng là: left - right - down - up
loop: là số lần lặp của đối tượng.
behavior: là hiệu ứng chạy của đối tượng, có 3 giá trị: slide - alternate - scroll
slide: chạy tới khi chạm lề thì dừng lại.
alternate: chạy tới khi chạm lề thì chạy ngược lại.
scroll: là kiểu mặt định, kiểu này tự động áp dụng vào tất cả các hình thức còn lại.
onmouseover="this.stop()" onmouseout="this.start()": Đưa trỏ chuột vào thì dừng lại
===========================
1. Chữ chạy ngang từ phải qua trái: Đây là đoạn mã cơ bản nhất, bạn chỉ việc để dòng chữ cần cho chạy vào giữa 2 thẻ MARQUEE là được.
Code: <marquee>Chào mừng các bạn đã đến đây (phải qua trái)</marquee>
2. Chữ chạy ngang từ trái qua phải:
Code: <marquee direction="right">Chào mừng các bạn đã đến đây (trái qua phải)</marquee>
3. Chữ chạy từ trên xuống dưới:
Code: <marquee direction="down" valign="baseline" width="350" height="200">Chào mừng bạn đã đến đây (trên xuống dưới)</marquee>
4. Chữ chạy từ dưới lên trên:
Code: <marquee direction="up" valign="baseline" width="350" height="200">Chào mừng bạn đã đến đây (dưới lên trên)</marquee>
5. Chữ chạy qua lại:
Code: <marquee behavior="alternate">Dòng chữ này chạy qua chạy lại</marquee>
6. Chữ chạy ngang, rê chuột vào thì đứng, đưa chuột ra chạy tiếp:
Code: <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="8">Dòng chữ này rê chuột vào sẽ dừng lại</marquee>
7. Màu nền, chữ kèm viền khung và hộp nổi:
<div style="background-color:#ffe4e1;color:green"><marquee behavior="alternate" style="border:blue 2px solid;box-shadow: 4px 4px #888888;padding:10px;">Màu nền, chữ kèm viền khung và hộp nổi</marquee></div>
* Chú ý: Nếu bạn dùng hình ảnh thì thay dòng text thành html hình ảnh, ví dụ:
<marquee><img src="https://i.pinimg.com/736x/2f/cd/1a/2fcd1ace40366761b43256adfa146691.jpg" alt="Anhlevan" width="200px"></marquee>
8. Cuối cùng là chạy chữ trên nền ảnh:
<div style="background: url(https://i.pinimg.com/736x/76/72/4a/76724aeaa877c5a93ed14bb6dcaa8d75.jpg); width: 240px; height: 320px; padding: 15px; font-weight: 600"> <marquee scrollamount="1" direction= "up" width="220" height="280" scrolldelay="0"> <font size="2" color="#ffff00">Chia sẻ là được nhận tất cả!<br /><br /> Cầu chúc cho quý thầy cô, quý phụ huynh và các em học sinh luôn mạnh khỏe và thành đạt<br /><br /></font> <font size="2" color="#ff0000">Cám ơn đã thăm blog này. Xin đừng quên để lại lời nhắn.</font><br /><br /><br /> <font size="2" color="#ffffff">Anhlevan</font><br /> </marquee> </div> </center>
☞ Nếu bạn có bất kỳ vấn đề nào với bài viết này hãy comment vào bên dưới, mình sẽ hồi âm sớm nhất có thể.
* DEMO: