Code ảnh chạy ngang html

     

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 đó.

Bạn đang xem: Code ảnh chạy ngang html


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.

Xin lưu ý các bạn, các đoạn mã này chỉ hoạt động trên các trình soạn thảo văn bản có hỗ trợ ngôn ngữ HTML thôi nhé (Mình thấy đa phần trình soạn thảo trên các hệ thống Blog miễn phí đều hỗ trợ HTML, riêng diễn đàn hầu như là không).

A- ÁP DỤNG CHO CHỮ

CÁCH 1:

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.Đoạn mã:

www.acsantangelo1907.com

Kết quả:www.acsantangelo1907.com

Lưu ý quan trọng: Thẻ marquee phía sau lúc nào cũng phải có dấu "https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpg/"https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpg ngay trước nhé, nếu không sẽ bị lỗi chạy cả bài viết luôn đó. Chú ý điều này là được!Từ đoạn mã cơ bản ở trên, chúng ta đặt các thuộc tính khác nhau vào trong thẻ marquee để tạo dòng chữ chạy với nhiều kiểu khác nhau.

2. Chữ chạy ngang từ trái qua phải:

www.acsantangelo1907.com

www.acsantangelo1907.com

3. Chữ chạy từ trên xuống dưới:

www.acsantangelo1907.com

www.acsantangelo1907.com

4. Chữ chạy từ dưới lên trên:

www.acsantangelo1907.com

www.acsantangelo1907.com

5. Chữ chạy qua lại:

www.acsantangelo1907.com

www.acsantangelo1907.com

6. Chữ đứng, mũi tên 2 bên chạy ra vào:

7. Chữ chạy có màu nền:

orange"https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpg>www.acsantangelo1907.com

www.acsantangelo1907.com

8. Chữ chạy có khung xung quanh:

blue 2px SOLID"https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpg>www.acsantangelo1907.com

www.acsantangelo1907.com

9. Chữ chạy và biến mất:

www.acsantangelo1907.com

www.acsantangelo1907.com

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

www.acsantangelo1907.com

www.acsantangelo1907.com

CÁCH 2:

Đầu tiên là đoạn code sẽ có cấu trúc chung như thế này:

3"https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpg direction="https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpgup"https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpg loop="https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpg50"https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpg scrolldelay="https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpg0"https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpgbehavior="https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpgscroll"https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpgonmouseover="https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpgthis.stop()"https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpg onmouseout="https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpgthis.start()"https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpg> ***

*** Các thông số:

scrollamountscrolldelay: 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 - uploop: 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.

Xem thêm: Miêu Tả Về Bản Thân Bằng Tiếng Anh Ngắn Gọn, Attention Required!

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.

** chú ý: những phần bôi xanh là những phần dùng để thay đổi thuộc tính theo ý ta mong muốnÁp dụng cho text.Việc áp dụng vào text thì cũng khá đơn giản, trên phần code chung có 3 dấu sao bị bôi xanh ( *** ) là phần mà ta sẽ đưa đoạn text mà ta muốn cho chạy vào vị trí đó.


Đố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,...Các bạn tiếp tục thay đổi các thuộc tính tùy theo sở thích của mình nhé, ví dụ ở trên là mình cho chạy từ phải sang trái (direction="https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpgleft"https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpg) và vòng lặp forever.Tiếp theo là text chạy chạm lề rồi chạy ngược lại:


B- ÁP DỤNG CHO HÌNH ẢNH

Cũng tương tự như phần áp dụng cho text, ta chỉ việc thêm nội dung vào 3 dấu sao đó, nhưng ở đây ta thay bằng thẻ

*

Link"https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpg>

.................................( Thêm link vào đây)

Link"https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpg>

*** Các thông số.Cũng như các thông số ở trên, chỉ thay đổi 1 số cái như thẻ , thẻ

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="https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpg_blank"https://acsantangelo1907.com/code-anh-chay-ngang-html/imager_1_168738_700.jpg và để mở link ở cửa sổ mới. đâ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.


Chuyên mục: