Phiên bản đầy đủ: jsB@nk » Hình ảnh » Trình diễn ảnh » Luồng ảnh chạy ngang
URL: https://www.javascriptbank.com/streaming-horizontal-banner.html
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ể chèn liên kết cho mỗi ảnh.Ngoài ra, bạn có thể xem thêm hiệu ứng Luồng ảnh di chuyển của cùng tác giả.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Trình diễn ảnh » Luồng ảnh chạy ngang
URL: https://www.javascriptbank.com/streaming-horizontal-banner.html
<style type="text/css"><!--#slideCont { border:solid 1px #000; text-align:center;}#slideCont img { margin: 5px;}--></style><script type="text/javascript"><!--/* ----------------------------------------------- Streaming banners - v.1 (c) 2006 www.haan.net You may use this script but please leave the credits on top intact. Please inform us of any improvements made. When usefull we will add your credits. ------------------------------------------------ */<!--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)}// Multiple onload function created by: Simon Willison// http://simonwillison.net/2004/May/26/addLoadEvent/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><div id="slideCont" style="overflow: hidden; position: relative; z-index: 1; width: 425px; height: 90px; top: 0px; clip: rect(auto, 425px, 90px, auto);"><div id="slideA" style="overflow: hidden; position: absolute; z-index: 1; top: 0px; left: -194px; width: 850px; height: 90px;"><div style="float: left;" id="innerSlideA"><a href="http://www.apache.org/"><img src="/logos/logo_jsbank.jpg" border="0" height="44" width="126"></a><a href="http://www.haan.net/"><img src="/logos/gif_logojsb2.gif" border="0" height="60" width="120"></a><a href="http://www.mysql.com/"><img src="/logos/jsb_banner.gif" border="0" height="44" width="126"></a></div><div id="slideB" style="overflow: hidden; position: relative; z-index: 1; top: 0px; left: 0px; width: 425px; height: 90px;"><a href="http://www.apache.org/"><img src="/logos/logo_jsb.jpg" border="0" height="44" width="126"></a><a href="http://www.haan.net/"><img src="/logos/logo_jsb__88x31.gif" border="0" height="60" width="120"></a><a href="http://www.mysql.com/"><img src="/logos/logo_jsb_120x60.jpg" border="0" height="44" width="126"></a></div></div></div>