Code Slide ảnh Chạy Ngang Liên Tục Không Bị Khoảng Trống - Taolao

Trang chủ » Slide Sản Phẩm Chạy Ngang » Code Slide ảnh Chạy Ngang Liên Tục Không Bị Khoảng Trống - Taolao

Có thể bạn quan tâm

TIN MỚI NHẤT

Home > BLOGSPOST > Code Slide ảnh chạy ngang liên tục không bị khoảng trống Code Slide ảnh chạy ngang liên tục không bị khoảng trống Code Slide ảnh chay ngang liên tục không bị khoảng trống. Sau đây mình xin chia sẻ với các bạn cách tạo slide ảnh chạy ngay liên tục mà không có khoảng trống như khi ta dùng thẻ marquee Hiệu ứng có thể làm cho một nhóm các hình ảnh (logo, banner,...) chạy ngang liên tục trên trang web, nếu không xem mã nguồn, có thể ta sẽ lầm tưởng rằng đây là một trong những đoạn mã sử dụng thẻ MARQUEE để thực hiện việc di chuyển. Bạn có thể xem demo phía dưới đây.Cách tạo Slide ảnh chay ngang liên tục không bị khoảng trống1. Phần css và JavasctiptCác bạn cop đoạn code dưới đây lên trên thẻ đóng </head><style type="text/css"><!--#slideCont { border:solid 1px #000; text-align:center;}#slideCont img { margin: 5px;}--></style><script type="text/javascript">function clip() { // width of the banner container var contWidth = 425; // height of the banner container var contHeight = 90; var id1 = document.getElementById('slideA'); var id2 = document.getElementById('slideB'); id1.style.left = parseInt(id1.style.left)-1 + 'px'; document.getElementById('slideCont').style.width = contWidth + "px"; document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)'; id2.style.display = ''; if(parseFloat(id1.style.left) == -(contWidth)) { id1.style.left = '0px'; } setTimeout(clip,25)}function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } }}addLoadEvent(function() { clip();});//--></script>2. Phần HTML của bạn cần làm như sau - Các bạn tùy biến chiều dài rộng kick cỡ ảnh cho phù hợp nhé<div id="slideCont" style="clip: rect(auto, 425px, 90px, auto); height: 90px; overflow: hidden; position: relative; top: 0px; width: 425px; z-index: 1;"><div id="slideA" style="height: 90px; left: -194px; overflow: hidden; position: absolute; top: 0px; width: 850px; z-index: 1;"><div id="innerSlideA" style="float: left;"><a href="http://www.apache.org/"><img border="0" height="44" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/1.jpg" width="126" /></a> <a href="http://www.haan.net/"><img border="0" height="60" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/2.jpg" width="120" /></a> <a href="http://www.mysql.com/"><img border="0" height="44" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/3.jpg" width="126" /></a> </div><div id="slideB" style="height: 90px; left: 0px; overflow: hidden; position: relative; top: 0px; width: 425px; z-index: 1;"><a href="http://www.apache.org/"><img border="0" height="44" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/4.jpg" width="126" /></a> <a href="http://www.haan.net/"><img border="0" height="60" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/5.jpg" width="120" /></a> <a href="http://www.mysql.com/"><img border="0" height="44" src="http://www.webdesignandsuch.com/posts/jquery-logo-slider-ticker/logos/6.jpg" width="126" /></a> </div></div></div> Code Slide ảnh chạy ngang liên tục không bị khoảng trống
  • Tiêu đề : Code Slide ảnh chạy ngang liên tục không bị khoảng trống
  • Đăng bởi : taolao.xyz
  • Ngày đăng : 18:50
  • Labels : BLOGSPOST
Item Reviewed: Code Slide ảnh chạy ngang liên tục không bị khoảng trống 9 out of 10 based on 10 ratings. 9 user reviews. Chia Sẽ: Bài đăng Mới hơn Bài đăng Cũ hơn
  • Facebook Comments
  • Blogger Comments

0 nhận xét:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)

Lượt xem trang

  • HOSTING - DOMAIN
  • SÁCH HAY MIỄN PHÍ
  • KIẾM TIÊN VỚI UBER
  • KIẾM TIỀN YOUTUBE
  • KIẾM TIỀN SUNFRO..
  • KIẾM TIỀN TESSPRING
  • TIẾP THỊ LIÊN KẾT
  • xxxxxxxxxxxxxxxxxxx
  • xxxxxxxxxxxxxxxxxxx
  • xxxxxxxxxxxxxxxxxxx
  • xxxxxxxxxxxxxxxxxxx
  • xxxxxxxxxxxxxxxxxxx

QUẢNG CÁO

QUẢNG CÁO

Labels

  • 1
  • BÍ QUYẾT
  • BLOGSPOST
  • CHIA SE
  • CƯỜI
  • DIA-DIEM
  • DOWNLOAD
  • FACEBOOK
  • GIẢI TRÍ
  • GOOGLE ADS
  • HAY
  • HOC TAP
  • HỌC TẬP
  • IT
  • KHỞI NGHIỆP
  • KIẾM TIỀN
  • KỸ NĂNG TÌM VIỆC
  • MAIL
  • ÔTÔ - XE MÁY
  • PHÁP LUẬT
  • RUT-GON-LINK
  • sach-hay
  • SEO
  • Sunfrogshirts
  • TÀI LIỆU
  • Teespring
  • THEME BLOG
  • THỦ THUẬT
  • TIẾP THỊ LIÊN KẾT
  • TIN CÔNG NGHỆ
  • TIN TỨC
  • TRÊN YOUTUBE
  • TRO TEN MIEN
  • UBER
  • VIDEO

Liên Hệ

Mr.Tào Lao

0909999999

Find Us On Facebook

QUẢNG CÁO

QUẢNG CÁO
  • Popular
  • Video
  • Category

Popular Posts

  • Code Slide ảnh chạy ngang liên tục không bị khoảng trống Code Slide ảnh chay ngang liên tục không bị khoảng trống. Sau đây mình  xin chia sẻ với các bạn cách tạo slide ảnh chạy ngay liên tục mà khô...
  • Code Zoom ảnh lớn hợn khi hơ chuột bằng CSS3.  Code CSS zoom ảnh khi hơ chuột vào ảnh. Code phóng to ảnh khi hơ chuột vào bằng CSS. Sau đây mình  xin chia sẻ với các bạn  Code Zoom ảnh l...
  • Code popup xuất hiện chỉ 1 lần khi vào trang web blogspot  Hướng tạo popup thông báo,banner quảng cáo xuất hiện chỉ 1 lần khi vào trang web blogspot. Hôm nay mình  sẽ h...
  • Chuyển Facebook UID sang Facebook email bằng Excel Facebook UID và Facebook Email là những hai thành phần cực kỳ quan trọng trong Facebook Marketing khi nó được sử dụng để nhắm mục tiêu cho c...

Video

Category

1 BÍ QUYẾT BLOGSPOST CHIA SE CƯỜI DIA-DIEM DOWNLOAD FACEBOOK GIẢI TRÍ GOOGLE ADS HAY HOC TAP HỌC TẬP IT KHỞI NGHIỆP KIẾM TIỀN KỸ NĂNG TÌM VIỆC MAIL ÔTÔ - XE MÁY PHÁP LUẬT RUT-GON-LINK sach-hay SEO Sunfrogshirts TÀI LIỆU Teespring THEME BLOG THỦ THUẬT TIẾP THỊ LIÊN KẾT TIN CÔNG NGHỆ TIN TỨC TRÊN YOUTUBE TRO TEN MIEN UBER VIDEO

Vertical Slider

SÁCH HAY MIỄM PHÍ

Top

Từ khóa » Slide Sản Phẩm Chạy Ngang