jQuery视差插件拖动以显示不同的图片-freejs.net代码演示

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

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

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

XML/HTML Code

<div class="row" style="margin-top: 2em;">
<div class="large-4 columns">
<h3>Basic Usage</h3>
<p>Demonstrates basic usage of the plugin.</p>
</div>
<div class="large-8 columns">
<div class="twentytwenty-container">
<img src="img/1_1.jpg" />
<img src="img/1_2.jpg" />
</div>
</div>
</div>
<div class="row" style="margin-top: 2em; margin-bottom: 2em;">
<div class="large-4 columns">
<h3>Vertical Orientation</h3>
<p>Demonstrates sliding up and down.</p>
</div>
<div class="large-8 columns">
<div class="twentytwenty-container" data-orientation="vertical">
<img src="img/1_1.jpg" />
<img src="img/1_2.jpg" />
</div>
</div>
</div>
<div class="row" style="margin-bottom: 2em;">
<div class="large-4 columns">
<h3>Side by side</h3>
<p>Using multiple comparisons at once.</p>
</div>
<div class="large-4 columns">
<div class="twentytwenty-container">
<img src="img/2_1.jpg" />
<img src="img/2_2.jpg" />
</div>
</div>
<div class="large-4 columns">
<div class="twentytwenty-container">
<img src="img/3_1.jpg" />
<img src="img/3_2.jpg" />
</div>
</div>
</div>
<script>
$(window).load(function(){
$(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
$(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});
});
</script>