Thủ thuật nâng cao tạo dãy hình ảnh chuyển động

Tạo chữ chuyển động, ảnh chuyển động rất đơn giản bằng mã HTML, đó chính là Marquee  - Một mã được các Blogger sử dụng phổ biến . Lệnh Marquee được thực hiện bằng cách sử dụng thẻ <marquee> {đối tượng}<marquee>. Lệnh marquee hiển thị tốt cả trên trình duyệt Internet Explorer thông dụng và một số trình duyệt khác với các phiên bản mới, tuy nhiên với một số phiên bản cũ của các trình duyệt này có thể hiện thị không được tốt.
Về cơ bản, đoạn mã có cú pháp như sau:

<marquee attributes ...> {đối tượng: HTML text, img, tag } </marquee>

Các thuộc tính attributes bao gồm:

ALIGN (căn lề cho text bên trong thẻ <marquee>, đoạn text này sẽ dồn về phía mà ta định) : top, bottom, right, left, middle
HEIGHT, WIDTH (bề rộng và bề ngang của vùng Marquee): đơn vị có thể là px hoặc %
BEHAVIOR (Kiểu trượt với các lựa chọn scroll - trượt hết miền marquee và bắt đầu lại từ đầu, slide - trượt đến điểm cuối miền marquee (tính theo hướng trượt) và đứng lại tại đó, alternate - trượt qua lại): scroll, slide, alternate
DIRECTION (hướng trượt) : up, down, left, right
HSPACE, VSPACE (khoảng cách ngang và dọc giữa text xung quanh và rìa vùng Marquee)
LOOP (lặp lại số lần trượt, nếu -1 : lặp lại vĩnh viễn.): -1, n
SCROLLAMOUNT, SCROLLDELAY (đột mượt và độ nhanh chậm của text trượt. SCROLLAMOUNT càng nhỏ thì càng mượt. SCROLLDELAY càng lớn thì càng chậm.)
BGCOLOR, CLASS, STYLE (định style cho marque thí dụ như màu nền, text bên trong,...)
Ví dụ: Với 3 bức hình của Alex Trần, Lilly Allen và Pamela Anderson tại được lưu trữ tại 3 địa chỉ như màu cam, địa chỉ đích tới khi click và chúng thể hiện bằng màu nâu ở dưới, bằng cách sử dụng các thuộc tính
direction="left" – Các bức ảnh sẽ chuyển động từ bên trái qua phải
behavior="alternate" – Các bức ảnh sau khi trượt hết từ trái qua sẽ trượt lại từ phải qua (trượt đi trượt lại)
scrollamount="2" – độ mượt của các hình ảnh
scrolldelay="50" – Độ nhanh chậm của tốc độ trượt
onmousemove="this.stop()" onmouseout="this.start() thể hiện tính năng khi user rà chuột vào marquee (onmouseover), nếu tôi muốn đoạn text đang chuyển động tạm dừng, sau khi user không rà chuột vào nữa (onmouseout), đoạn text lại tiếp tục chuyển động.
height="100" width="100%": thể hiện chiều cao và độ rộng của Marquee.
Đoạn code ví dụ:

<marquee onmouseout="this.start()" direction="left" behavior="alternate" scrollamount="2" scrolldelay="50" onmouseover="this.stop()"  height="100" width="100%">
<a href="http://www.vnpressnet.com/search/label/Alex%20Tran" target="_blank" title="ALEX Trần"><img alt="ALEX Trần" width="80" src="http://ngoisao.net/News/Hau-truong/2009/06/3B9CA434/3.jpg" height="100"/></a>
<a alt="Lilly ALLEN" href="http://www.vnpressnet.com/search/label/Allen" target="_blank" title="Lilly ALLEN"><img alt="Lilly ALLEN" width="80" src="http://www.tienphong.vn/tianyon/ImageView.aspx?ThumbnailID=223868" height="100"/></a>
<a alt="pamela ANDERSON" href="http://www.vnpressnet.com/search/label/P.Anderson" target="_blank" title="pamela ANDERSON"><img alt="pamela ANDERSON" width="80" src="http://www.video4viet.com/news/2008/04/09/images/E59YG1_pam1.jpg" height="100"/></a>
</marquee>

Tương tự nhi ví dụ trên, các bạn có thể thay thế các thuộc tính attributes để hiển thị hình ảnh theo yêu cầu của từng người, bạn có thể tham khảo thêm bài viết cơ bản để thực hiện chuyển động cho các đoạn tex tại đây hoặc tham khảo hướng dẫn làm hình ảnh chuyển động cơ bản tại đây.

Chúc các bạn thành công!!! Tags: Breakingnews, Image - Icon, Khoi tao Blog