使用 bxSlider 进行平移缩放不集中缩放
Pan zoom with bxSlider not zooming in centralized
我在 bxSlider 中使用了 Panzoom jquery。问题是在使用滚动缩放时它不会在中心缩放。缩放会向左或向右移动 因为有滑块,否则它工作正常。
在这里找到fiddle demo。
<div class="slider">
<ul class="bxSlider">
<li>
<section class="focal">
<div class="parent">
<div class="panzoom">
<img src="https://rockwoodtables.files.wordpress.com/2012/06/table-4.jpg" width="1000" height="450" />
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range" />
<button class="reset">Reset</button>
</div>
</section>
</li>
<li>
<section class="focal">
<div class="parent">
<div class="panzoom">
<img src="http://www.patiocollection.com/images/D/971250B.jpg" width="1000" height="450" />
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range" />
<button class="reset">Reset</button>
</div>
</section>
</li>
<li>
<section class="focal">
<div class="parent">
<div class="panzoom">
<img src="http://s3.amazonaws.com/images2.eprevue.net/p4dbimg/1375/images/ce0941_ext.jpg" width="1000" height="450" />
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range" />
<button class="reset">Reset</button>
</div>
</section>
</li>
</ul>
</div>
js
(function() {
var $section = $('.focal');
var $panzoom = $section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset"),
$set: $section.find('.parent > div')
});
$panzoom.parent().on('mousewheel.focal', function( e ) {
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
$panzoom.panzoom('zoom', zoomOut, {
increment: 0.1,
animate: false,
focal: e
});
});
})();
$('.bxSlider').bxSlider({
auto:true,
autoHover: true,
speed:1800,
controls: true,
pager: false,
pause: 10000
});
您的问题不在于滑块本身。您只是选择具有相同 class .focal
.
的多个元素(部分)
Panzoom 设计用于单个元素。所以我们只需要创建一个函数并用 each()
遍历每个元素。现在我们可以每次都调用该函数,将 panzoom()
方法绑定到每个元素(分别)。
JSFiddle(仅编辑过的 JS)
我在 bxSlider 中使用了 Panzoom jquery。问题是在使用滚动缩放时它不会在中心缩放。缩放会向左或向右移动 因为有滑块,否则它工作正常。
在这里找到fiddle demo。
<div class="slider">
<ul class="bxSlider">
<li>
<section class="focal">
<div class="parent">
<div class="panzoom">
<img src="https://rockwoodtables.files.wordpress.com/2012/06/table-4.jpg" width="1000" height="450" />
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range" />
<button class="reset">Reset</button>
</div>
</section>
</li>
<li>
<section class="focal">
<div class="parent">
<div class="panzoom">
<img src="http://www.patiocollection.com/images/D/971250B.jpg" width="1000" height="450" />
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range" />
<button class="reset">Reset</button>
</div>
</section>
</li>
<li>
<section class="focal">
<div class="parent">
<div class="panzoom">
<img src="http://s3.amazonaws.com/images2.eprevue.net/p4dbimg/1375/images/ce0941_ext.jpg" width="1000" height="450" />
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range" />
<button class="reset">Reset</button>
</div>
</section>
</li>
</ul>
</div>
js
(function() {
var $section = $('.focal');
var $panzoom = $section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset"),
$set: $section.find('.parent > div')
});
$panzoom.parent().on('mousewheel.focal', function( e ) {
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
$panzoom.panzoom('zoom', zoomOut, {
increment: 0.1,
animate: false,
focal: e
});
});
})();
$('.bxSlider').bxSlider({
auto:true,
autoHover: true,
speed:1800,
controls: true,
pager: false,
pause: 10000
});
您的问题不在于滑块本身。您只是选择具有相同 class .focal
.
Panzoom 设计用于单个元素。所以我们只需要创建一个函数并用 each()
遍历每个元素。现在我们可以每次都调用该函数,将 panzoom()
方法绑定到每个元素(分别)。
JSFiddle(仅编辑过的 JS)