Phiên bản đầy đủ: jsB@nk » Hình ảnh » Xem ảnh » Ảnh trượt ngang
URL: https://www.javascriptbank.com/glide-scroll-horizontal-glide-scroll-onclick.html
Hiệu ứng sẽ cho bạn xem các ảnh khi ta nhấn vào các nút, bạn có thể thay đổi thông số để ảnh có thể trượt nhanh/ chậm hơn.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Xem ảnh » Ảnh trượt ngang
URL: https://www.javascriptbank.com/glide-scroll-horizontal-glide-scroll-onclick.html
<script type="text/javascript">var wndo = [];// Necessary to avoid errors before page loaded function dw_glideScrollBy(num, x, y, dur) { if ( wndo[num] && wndo[num].glideScrollBy ) wndo[num].glideScrollBy(x, y, dur);}function initScrollLayer() { // arguments: id of layer containing scrolling layers (clipped layer), id of layer to scroll, // if horizontal scrolling, id of element containing scrolling content (table?) wndo[0] = new dw_scrollLayer('wn', 'lyr1', 't1'); // pass id's of any wndo's that scroll inside tables // i.e., if you have 3 (with id's wn1, wn2, wn3): GeckoTableBugFix('wn1', 'wn2', 'wn3'); GeckoTableBugFix('wn'); }</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><LINK href="css/glide_scroll_h.css" type=text/css rel=stylesheet><script src="js/dw_glidescroll.js" type="text/javascript"></script><body onload="initScrollLayer()"><table class="main" cellspacing="0" cellpadding="8" border="0"><tr> <td> </td><td><!-- scrolling layers --><div id="hold"> <div id="wn"> <div id="lyr1" class="content"> <table id="t1" cellpadding="0" cellspacing="0" border="0"> <tr><td><a href="http://jsbank.beplaced.com"><img src="../logojs.gif" width="175" height="40" alt="" /></a></td> <td><img src="../logojs.gif" width="176" height="30" alt="" /></td> <td><img src="../logojs.gif" width="132" height="32" alt="" /></td> <td><a href="http://jsbank.beplaced.com"><img src="../logojs.gif" width="175" height="40" alt="" /></a></td> <td><img src="../logojs.gif" width="176" height="30" alt="" /></td> <td><img src="../logojs.gif" width="132" height="32" alt="" /></td> <td><a href="http://jsbank.beplaced.com"><img src="../logojs.gif" width="175" height="40" alt="" /></a></td> <td><img src="../logojs.gif" width="176" height="30" alt="" /></td> <td><img src="../logojs.gif" width="132" height="32" alt="" /></td> </tr> </table> </div> </div> <!-- end wn div --></div><!-- end hold div --> </td> <td> </td></tr><tr> <td class="spacer"> </td><!-- dw_glideScrollBy arguments: wndo element number, amount to scroll onclick on x, y axes, (optional, not included here) duration of glide --><td class="arrows"> <a href="javascript:;" onclick="dw_glideScrollBy(0,200,0); return false" onmouseover="window.status='Click to scroll'; return true" onmouseout="window.status=''"><img src="images/aro-lft.gif" width="19" height="9" alt="" /></a> <a href="javascript:;" onclick="dw_glideScrollBy(0,-200,0); return false" onmouseover="window.status='Click to scroll'; return true" onmouseout="window.status=''"><img src="images/aro-rt.gif" width="19" height="9" alt="" /></a> </td> <td class="spacer"> </td></tr><tr> <td> </td></tr></table></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/image/Glide_Scroll/css/glide_scroll_h.csshttp://javascriptbank.com/javascript/image/Glide_Scroll/js/dw_glidescroll.js