首页>>Jquery图片>>jQuery视差插件 拖动以显示不同的图片(2014-08-07)

jQuery视差插件 拖动以显示不同的图片

 拖动滚动条显示2张不同的图片

jQuery视差插件 拖动以显示不同的图片
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="row" style="margin-top: 2em;">  
  2.      <div class="large-4 columns">  
  3.        <h3>Basic Usage</h3>  
  4.        <p>Demonstrates basic usage of the plugin.</p>  
  5.      </div>  
  6.      <div class="large-8 columns">  
  7.        <div class="twentytwenty-container">  
  8.          <img src="img/1_1.jpg" />  
  9.          <img src="img/1_2.jpg" />  
  10.        </div>  
  11.      </div>  
  12.    </div>  
  13.      
  14.    <div class="row" style="margin-top: 2em; margin-bottom: 2em;">  
  15.      <div class="large-4 columns">  
  16.        <h3>Vertical Orientation</h3>  
  17.        <p>Demonstrates sliding up and down.</p>  
  18.      </div>  
  19.      <div class="large-8 columns">  
  20.        <div class="twentytwenty-container" data-orientation="vertical">  
  21.          <img src="img/1_1.jpg" />  
  22.          <img src="img/1_2.jpg" />  
  23.        </div>  
  24.      </div>  
  25.    </div>  
  26.   
  27.    <div class="row" style="margin-bottom: 2em;">  
  28.      <div class="large-4 columns">  
  29.        <h3>Side by side</h3>  
  30.        <p>Using multiple comparisons at once.</p>  
  31.      </div>  
  32.      <div class="large-4 columns">  
  33.        <div class="twentytwenty-container">  
  34.          <img src="img/2_1.jpg" />  
  35.          <img src="img/2_2.jpg" />  
  36.        </div>  
  37.      </div>  
  38.      <div class="large-4 columns">  
  39.        <div class="twentytwenty-container">  
  40.          <img src="img/3_1.jpg" />  
  41.          <img src="img/3_2.jpg" />  
  42.        </div>  
  43.      </div>  
  44.    </div>  
  45.   
  46.      
  47.    <script>  
  48.    $(window).load(function(){  
  49.      $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});  
  50.      $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});  
  51.    });  
  52.    </script>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_399.html