javascript - 缩放和平移（对多个图像进行分组）jquery

Question

我正在启动一个项目，该项目涉及要通过鼠标滚动缩放的多个图像，然后在其边界边界内平移。因此，如果图像到达最左/最右，则平移停止。

我一直在测试 panzoom jquery，但我无法理解这一点。

例如，下面是用于缩放/平移包含 4 个图像的组的代码。

CSS

<style>
    #focal { width:100%; height:100%; padding:0; margin:0; }
</style>

HTML

<section id="focal">           
    <div class="parent">
        <div class="panzoom">
            <img src="C:\...\blue.jpg" width="20" height="20">
            <img src="C:\...\green.jpg" width="20" height="20">
            <img src="C:\...\blue.jpg" width="20" height="20">
            <img src="C:\...\green.jpg" width="20" height="20">
        </div>     
    </div>
</section>     

JAVASCRIPT

<script>
    (function() {
        var $section = $('#focal');          
        var $panzoom = $section.find('.panzoom').panzoom();
        $panzoom.parent().on('mousewheel.focal', function( e ) {
            e.preventDefault();
            $panzoom.panzoom('zoom', e.originalEvent.wheelDelta < 0, {
                increment: 0.1,
                focal: e });
        });
    })();
</script>

有谁知道包含边界的代码是什么。如上所述，我希望平移在网页上达到其“边界”后停止。此外，代码整体看起来会是什么样子。

非常感谢。