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

Có thể bạn quan tâm

Facebook
twitter
behance
envato
googleplus
linkedin
youtube
flickr
vimeo

Binhbk230 ≡ Click Here

Home
Kiến thức lập trình▼
- Lập trình Android
- ASP .NET
- ASP .NET MVC
- Lập trình PHP
- Lập trình CSDL
Kiến thức mạng▼
- Network
- Lý thuyết CCNA
Thủ thuật Blog▼
- Thủ thuật Blog
- WPress-Joomla
Thủ thuật hay▼
- Thủ thuật chung
- Thủ thuật hay
- Thủ thuật Mobile
Thủ thuật window▼
- Thủ thuật Window
- Thủ thuật PC
- Thủ thuật Win 8
- Thủ thuật Excel
- Thủ thuật Word
Góc phụ nữ▼
- Góc làm đẹp
- Làm đẹp da
- Tư vấn làm đẹp
Giải trí

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 Bít Tuốt 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ẻ marqueeHiệ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"></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>

About "Administrator"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit, augue quis mattis gravida, est dolor elementum felis, sed vehicula metus quam a mi. Praesent dolor felis, consectetur nec convallis vitae.