Những người bạn đã viết HTML trong một thời gian dài có thể nhớ yếu tố đó. Đây là phần tử dành riêng cho trình duyệt đã tạo ra một biểu ngữ cuộn văn bản trên màn hình. Phần tử này chưa bao giờ được thêm vào đặc tả HTML và hỗ trợ cho nó đa dạng trên các trình duyệt. Mọi người thường có ý kiến rất mạnh mẽ về việc sử dụng yếu tố này - cả tích cực và tiêu cực. Nhưng cho dù bạn yêu hay ghét nó, nó đã phục vụ mục đích làm cho nội dung tràn qua ranh giới hộp có thể nhìn thấy.
Một phần lý do nó không bao giờ được thực hiện đầy đủ bởi các trình duyệt, ngoài ý kiến cá nhân mạnh mẽ, là nó được coi là một hiệu ứng hình ảnh và như vậy, nó không nên được định nghĩa bởi HTML, xác định cấu trúc. Thay vào đó, các hiệu ứng hình ảnh hoặc bản trình bày phải được quản lý bằng CSS. Và CSS3 thêm mô-đun marquee để kiểm soát cách trình duyệt thêm hiệu ứng vùng chọn vào các phần tử.
Thuộc tính CSS3 mới
CSS3 thêm năm thuộc tính mới để giúp kiểm soát cách hiển thị nội dung của bạn trong vùng chọn: kiểu tràn, kiểu marquee, marquee-play-count, marquee-direction và marquee-speed.
tràn phong cách
Thuộc tính kiểu tràn (mà tôi cũng đã thảo luận trong bài viết CSS Overflow) định nghĩa kiểu dáng ưa thích cho nội dung tràn vào hộp nội dung. Nếu bạn đặt giá trị thành dòng marquee-marquee-block, nội dung của bạn sẽ trượt vào và ra bên trái / phải (dòng marquee) hoặc lên / xuống (khối lệnh).
kiểu marquee
Thuộc tính này xác định cách nội dung sẽ chuyển sang chế độ xem (và ra).
Các tùy chọn là cuộn, trượt và thay thế. Cuộn bắt đầu với nội dung hoàn toàn tắt màn hình, và sau đó nó di chuyển trên khu vực có thể nhìn thấy cho đến khi nó là tất cả hoàn toàn tắt màn hình một lần nữa. Trượt bắt đầu với nội dung hoàn toàn tắt màn hình và sau đó nó di chuyển trên cho đến khi nội dung đã di chuyển hoàn toàn lên màn hình và không còn nhiều nội dung để trượt trên màn hình nữa.
Cuối cùng, thay thế bị trả lại nội dung từ bên này sang bên kia, trượt qua lại.
marquee-play-count
Một trong những hạn chế của việc sử dụng phần tử MARQUEE là vùng chọn không bao giờ dừng lại. Nhưng với tính năng phong cách marquee-play-count, bạn có thể đặt vùng chọn để xoay và tắt nội dung cho một số lần cụ thể.
marquee-direction
Bạn cũng có thể chọn hướng mà nội dung sẽ cuộn trên màn hình. Các giá trị chuyển tiếp và đảo ngược được dựa trên sự định hướng của văn bản khi phong cách tràn là dòng marquee và lên hoặc xuống khi kiểu tràn là chặn marquee.
Chi tiết hướng Marquee
| tràn phong cách | Hướng ngôn ngữ | phía trước | đảo ngược |
|---|---|---|---|
| dòng marquee | ltr | trái | đúng |
| rtl | đúng | trái | |
| -khối khối | lên | xuống |
tốc độ chạy marquee
Thuộc tính này xác định tốc độ cuộn nội dung trên màn hình. Các giá trị chậm, bình thường và nhanh. Tốc độ thực tế phụ thuộc vào nội dung và trình duyệt hiển thị nó, nhưng các giá trị phải chậm hơn bình thường chậm hơn tốc độ nhanh.
Hỗ trợ trình duyệt thuộc tính Marquee
Bạn có thể cần phải sử dụng tiền tố của nhà cung cấp để có được các phần tử CSS marquee hoạt động. Chúng như sau:
| CSS3 | Tiền tố nhà cung cấp |
|---|---|
| overflow-x: marquee-line; | overflow-x: -webkit-marquee; |
| kiểu marquee | -webkit-marquee-style |
| marquee-play-count | -webkit-marquee-repetition |
| marquee-direction: forward | đảo ngược; | -webkit-marquee-direction: chuyển tiếp | ngược; |
| tốc độ chạy marquee | -webkit-marquee-speed |
| không tương đương | -giao diện webkit-marquee |
Thuộc tính cuối cùng cho phép bạn xác định các bước lớn hoặc nhỏ như thế nào khi nội dung cuộn trên màn hình trong vùng chọn.
Để có vùng chọn của bạn hoạt động, bạn nên đặt giá trị đầu tiên của nhà cung cấp trước và sau đó theo dõi chúng với các giá trị đặc tả CSS3. Ví dụ: đây là CSS cho vùng chọn cuộn văn bản năm lần từ trái sang phải bên trong hộp 200x50.
{
chiều rộng: 200px; chiều cao: 50px; trắng-không gian: nowrap;
overflow: hidden;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: tiền đạo;
-webkit-marquee-style: cuộn;
-webkit-marquee-speed: bình thường;
-webkit-marquee-increment: nhỏ;
-webkit-marquee-repetition: 5;
overflow-x: marquee-line;
marquee-direction: forward;
marquee-style: di chuyển;
tốc độ marquee: bình thường;
marquee-play-count: 5;
}