Zoom＆amp;平移（分组多个图像）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>

有谁知道包含边界的代码是什么。如上所述，我希望一旦它到达网页上的“边界”就停止平移。此外，代码整体上看起来像什么。

非常感谢。