Kênh 360 Công Nghệ Kênh 360 Công Nghệ

Trang chủ - Thiết kế web - HTML - CSS - Tạo chữ cuộn ngang, cuộn dọc bằng thẻ marquee

Tạo chữ cuộn ngang, cuộn dọc bằng thẻ marquee

Hiệu ứng marquee tuy đơn giản nhưng đôi khi đối với người làm web rất cần thiết. Đây là hiệu ứng đơn giản nhất mà ngôn ngữ HTML hỗ trợ. Hướng dẫn Tạo chữ cuộn ngang, cuộn dọc bằng thẻ marquee.

Giữa thẻ marquee, chúng ta có thể đặt văn bản, hình ảnh… Thẻ marquee có những thuộc tính 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.

Thí dụ: <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.

Thí dụ.  <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.

Thí dụ : <MARQUEE SCROLLDELAY=1 SCROLLAMOUNT=75>I'm fast</MARQUEE>

Chú ý: Bạn có thể xác lập font cho marquee. Thí dụ:
<FONT FACE="Comic Sans MS"><MARQUEE>Hello</MARQUEE>

Sau đây là một ví dụ cụ thể thực tế hay dùng. Hiệu ứng sẽ chạy với tốc độ chậm dần đều và không gây nhức mắt cho người xem

<marquee scrollamount="1" scrolldelay="30" truespeed>ĐÂY LÀ VĂN BẢN MARQUEE</marquee>

Kết quả như sau:

ĐÂY LÀ VĂN BẢN MARQUEE

Nguồn joomla.edu.vn

Cuộn dọc
<marquee id="scrollup" width="98%" style="height: 133pt;" direction="up" scrolldelay="100" scrollamount="2" onmouseout="this.start()" onmouseover="this.stop()">

Line 1.<br />
Line 2.
</marquee>
Cuộn ngang: sang trái
<marquee id="scrollleft" width="98%" style="height: 133pt;" direction="left" scrolldelay="100" scrollamount="2" onmouseout="this.start()" onmouseover="this.stop()">
Text 1.
</marquee>



Tin mới hơn:
Tin cũ hơn:

Lần cập nhật cuối ( Thứ bảy, 16 Tháng 5 2009 00:45 ) Số truy cập 8860  

Tin mới


Dùng Microsoft Office miễn phí trên iPad
Ứng dụng OnLive Desktop trên iPad giúp người dùng xử lý các tài liệu văn bản Word, Excel, PowerPoint của Microsoft hệt như khi ...
Làm chủ Microsoft Office cho iPad
Nếu là người đã thành thạo các phiên bản Office dành cho máy tính, những lời khuyên dưới đây sẽ giúp bạn hiểu và sử ...
Login Failed for User (Microsoft SQL Server, Error: 18456)
Open SQL Server Management Studio and right click on Server Node and select Properties Now go to Security Tab and go to Server Authentical Area. Select ...
Windows Server 2012 and 2008 R2 - Enable Multiple RDP sessions
Windows Server 2012 and 2008 R2 - Enable Multiple RDP sessions Problem Server 2012/2008 R2 unlike their predecessors, comes with the multiple remote ...
Java SE Development Kit 8 Downloads
Java SE Development Kit 8 Downloads Thank you for downloading this release of the JavaTM Platform, Standard Edition Development Kit (JDKTM). The JDK is ...
Đã có thể cập nhật iOS 8, có link tải về offline
Apple vừa đưa ra bản cập nhật iOS để người dùng tải về. Hiện tại bạn có thể cập nhật nó bằng cách kiểm tra trong ...
Kinh nghiệm chọn mua sạc iPhone 'hàng xịn'
Kinh nghiệm chọn mua sạc iPhone 'hàng xịn' Những tai nạn giật điện liên tiếp gần đây với nghi vấn do sử dụng sạc ...
Interactive text fields with Fabric.js
Interactive text fields with Fabric.jshttp://fabricjs.com/Documenthttp://fabricjs.com/articles/http://fabricjs.com/fabric-intro-part-2/#textcanvas.add(new ...
Bộ sưu tập ảnh bìa Facebook đẹp và ý nghĩa nhất 2014
gửi tặng các bạn BST ảnh bìa Facebook đẹp và ý nghĩa nhất được tuyển chọn từ nhiều nguồn trên Internet. Các bạn hãy ...
Một số engineer lập trình game di động
Sau 1 thời gian tìm hiểu và có code thử vài game di động, mình tổng hợp 1 số engineer game thông dụng 1. Unity 3D - Website ...
  • Nổi bật
  • PrestaShop Guide
  • PrestaShop

Có thể bạn quan tâm

Game mới


Chơi Flappy Bird Online không cần cài đặt
Chơi Flappy Bird Online không cần cài đặt Cách chơi Flappy BirdDùng chuột bấm vào bất kỳ vị trí nào trên màn hìnhUpdate sắp ...
Clash of Clasn - Cách chuyển nhà từ iOS sang Android
Trên iOs bạn vào Settings > Link a device > This is the OLD DEVICE > I want to link to another device > Lấy code. Trên Android Settings > Link a ...
[Review] Grand Theft Auto 5
Sản xuất : Rockstar Games Phát triển : Rockstar North Tổng đạo diễn : Adam Fowler Chịu trách nhiệm sản xuất : Leslie ...
Download Fifa 14 PC
Download game Fifa 14 full crack Video Trailer &lt;a target="_blank" ...
GTA IV Full PC
Gã lái xe giữa những con phố nhộn nhịp ngập tràn đèn neon, vòng qua một nơi rất giống với quảng Thời đại ở New York ...
Grand Theft Auto V - Download tải game Grand Theft Auto 5 - tải GTA 5 full mod
Grand Theft Auto V (hay GTA 5) đang được sự quan tâm rất nồng hậu của các Gamer hiện nay. Sức hấp dẫn của Grand Theft Auto thì ...
Pes 2014 - Pro Evolution Soccer 2014 PC Full
Pes 2014 PC Full Clone DVD Crack Pro Evolution Soccer 2014 marks a new beginning for Konami’s blockbuster soccer series, with an ...
Clash of Clan - Thứ tự upgrade các loại trụ defence
Nên upgrade loại trụ nào trước và up lên level nào là tốt nhất? Theo mình thì thứ tự upgrade sẽ như sau: 1. Mortar: range ...
Hỏi Đáp về Game Clash of Clans
Sau đây mình sẽ trả lời những câu hỏi thường gặp của các bạn về game Clash of Clans Hỏi: Farm là gì, đi farm liệu có ...
Download Far Cry 3
Vậy là “cơn bão” cuối cùng trong năm mang tên Far Cry 3 cũng đã chính thức đổ bộ vào làng game thủ thế giới. Ngay khi ...
English French German Japanese Korean

Warning: session_write_close() [function.session-write-close]: write failed: Disk quota exceeded (122) in /home/kenh360com/domains/kenh360.com/public_html/cntt/libraries/joomla/session/session.php on line 529

Warning: session_write_close() [function.session-write-close]: Failed to write session data (files). Please verify that the current setting of session.save_path is correct () in /home/kenh360com/domains/kenh360.com/public_html/cntt/libraries/joomla/session/session.php on line 529