»
AnglaisFranaisVietnamien

Imprimer - Faites défiler avec un Gliding Motion OnClick - JavaScriptBank.com

Version complte: jsB@nk » Image » Visualiseur d'images » Faites défiler avec un Gliding Motion OnClick
URL: https://www.javascriptbank.com/glide-scroll-glide-scroll-vertically-onclick.html

Faites défiler avec un Gliding Motion OnClick © JavaScriptBank.comCet JavaScript diaporama permet à l'utilisateur de déplacer manuellement et-vient entre les images, en cliquant sur les boutons fournis.

Version complte: jsB@nk » Image » Visualiseur d'images » Faites défiler avec un Gliding Motion OnClick
URL: https://www.javascriptbank.com/glide-scroll-glide-scroll-vertically-onclick.html



JavaScript
<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');    // 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-->


HTML
<LINK href="css/glide_scroll_rel_v.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>  <th colspan="3"></th></tr><tr>    <td class="text">      <p>This example positions the scrolling layers in a cell of a centered table.</p>      <p>The glide-scroll code supports <a href="scrollbar.html">scrollbars</a>, <a href="glide_scroll_h.html">horizontal scrolling</a>, and gliding to <a href="glide_grid.html">specific images</a>.</p>    </td>  <td><!-- relative positioned layer that contains scrolling layers --><div id="hold"><div id="wn">   <!-- scrolling layer here --><div id="lyr1" class="content">  <!-- The images here are different sizes, so td height is set (in style sheet) to equalize those differences.   The table cell height is set equal to the scroll distance per click.   --><table id="imgTbl" border="0" cellpadding="0" cellspacing="0">     <tr>      <td><img src="../logojs.gif" width="100" height="100" alt="" /></td>     </tr>     <tr>      <td><img src="../logojs.gif" width="100" height="100" alt="" /></td>     </tr>     <tr>      <td><img src="../logojs.gif" width="100" height="100" alt="" /></td>     </tr>     <tr>      <td><img src="../logojs.gif" width="106" height="131" alt="" /></td>     </tr>     <tr>      <td><img src="../logojs.gif" width="88" height="88" alt="" /></td>     </tr>    </table></div>  <!-- end scrolling layer --></div>  <!-- end wn  --></div><!-- end hold (relative layer) --></td><td><table class="scrollLinks" border="0" cellpadding="0" cellspacing="0"><tr>  <!-- dw_glideScrollBy arguments: wndo element number, amount to scroll onclick on x, y axes,     (optional, not included here) duration of glide --><td valign="top"><a href="javascript:;" onclick="dw_glideScrollBy(0,0,140); return false" onmouseover="window.status='Click to scroll'; return true" onmouseout="window.status=''"><img src="images/aro-up.gif" width="11" height="18" alt="" /></a></td></tr><tr><td class="spacer"> </td></tr><tr><td valign="bottom"><a href="javascript:;" onclick="dw_glideScrollBy(0,0,-140); return false" onmouseover="window.status='Click to scroll'; return true" onmouseout="window.status=''"><img src="images/aro-dn.gif" width="11" height="18" alt="" /></a></td></tr></table></td></tr></table></body><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


Files
http://javascriptbank.com/javascript/image/Glide_Scroll/css/glide_scroll_rel_v.csshttp://javascriptbank.com/javascript/image/Glide_Scroll/js/dw_glidescroll.js