Code chữ chạy-marquee cho blog/web

Hiện nay, trên các trang website, hay blog điều có những dòng chữ hay những hình ảnh chay qua lại, lên xuống rất đẹp mắt. Để trang trí thêm cho trang cũng như là tiết kiệm được diện tích site của ta, hôm nay mình sẽ tổng hợp 1 số code cơ bản để các bạn có thể làm điều đó.

Dưới đây là tổng hợp các đoạn mã dùng để tạo các kiểu chữ chạy khác nhau trên web/blog. Hướng dẫn này cũng có khá nhiều bài viết chia sẽ trên mạng rồi, nhưng mình cũng cố gắng tổng hợp lại và hướng dẫn chi tiết để các bạn thực hiện 1 cách dễ dàng nhất.

Bạn copy đoạn mã (code) sau đây bạn thích, rồi past lên blog, Web của bạn ( Chú ý mở bên HTLM của trình soạn thảo)

Dưới đây là các code và minh họa:

Code chữ chạy không tùy chỉnh(mặc định)

1/ Chữ chạy từ phải qua trái :

<marquee direction="left"> <font size=6 color=blue>Viết nội dung </font></marquee>

Viết nội dung
2/ Chữ chạy từ trái qua phải:

<marquee direction="right"><font size=6 color=blue>Viết nội dung </font></marquee>

Viết nội dung
3/Chữ chạy đi chạy lại trong màn hình:

<marquee behavior="alternate"><font size=6 color=blue>Viết nội dung</font></marquee>

Viết nội dung
4/Chữ chạy lên:
Viết nội dung

<marquee direction=up><font size=6 color=blue>Viết nội dung</font></marquee>

5/Chữ chạy xuống:

<marquee direction=down><font size=6 color=blue>Viết nội dung</font> </marquee>

Viết nội dung
6/Nếu muốn chữ chạy có nền thì thêm đoạn code màu đỏ vào thẻ mở marquee của tất cả các code trên
Đoạn code: style="background:yellow"
Ở đây là màu vàng (yellow) bạn có thể thay đổi màu tùy thích(màu nhớ ghi là chữ)
Ví dụ:

<marquee direction="left"style="background:yellow"><font size=6 color=blue>Viết nội dung</font></marquee>

Viết nội dung
7/Chữ chạy có viền thì thêm đoạn code sau vào thẻ mở marquee
style="border: 2px solid blue"
Ví dụ:

<marquee direction="left"style="border: 2px solid blue"><font size=6 color=blue> Viết nội dung </font></marquee>

Viết nội dung
9/Chữ chạy và biến mất:

<marquee behavior="alternate"><marquee width="150">Viết nội dung</marquee></marquee>

Viết nội dung
10/Chữ chạy ngang, rê chuột vào thì đứng, đưa chuột ra chạy tiếp:

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2">Viết nội dung</marquee>

Viết nội dung

Code chữ chạy có thể tùy chỉnh

Code cơ bản có dạng

<marquee id="marq" scrollamount="3" direction="up" loop="50" scrolldelay="0" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()"> Nội dung cần chạy </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.

Áp dụng cho text.

Thay phần nội dung cần chạy bằng nội dung bạn muốn.
Đối với text thì ta cũng có thể thêm vào các thuốc tính như font color, style, font-color,...

Áp dụng cho hình ảnh
Code:

<marquee id="marq" scrollamount="3" direction="up" loop="50" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">
<a href="Link"><img src="Link hình ảnh" title="Ghi chú cho ảnh" width="200" height="300"/> </a>

</marquee>

Muốn thêm ảnh thêm ngay sau </a> với

<a href="Link"><img src="Link hình ảnh" title="Ghi chú cho ảnh" width="200" height="300"/> </a>

Trong đó
<a href="Link"> là thẻ chứa link mà khi ta click vào hình sẽ dẫn ta tới link đó, các bạn nên thêm thuộc tính target="_blank" và để mở link ở cửa sổ mới.
<img src="Link hình ảnh"> đây chính là phần chèn link ảnh mà ta cần đưa vào để chạy. title ghi chú cho từng bức ảnh, nó sẽ hiện lên khi ta trỏ chuột vào ảnh. Các bạn cũng có thể thêm vào nó vào 1 cái table, hoặc thêm vào các thuộc tính như width, height để định dạng cố định size ảnh.