Javascript 缩放及；平移（将多个图像分组）jquery

我开始一个项目，涉及超过1个图像通过鼠标滚动缩放，然后在其边界内平移。因此，如果图像到达最左边/最右边，平移就会停止

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

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

CSS

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

#焦点{宽度：100%；高度：100%；填充：0；边距：0；}

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>

（功能（）{
变量$section=$（'焦点'）；
var$panzoom=$section.find（'.panzoom'）.panzoom（）；
$panzoom.parent（）.on（'mousewheel.focal'，函数（e）{
e、 预防默认值（）；
$panzoom.panzoom（'zoom'，e.originalEvent.wheelDelta<0{
增量：0.1，
联络人：e}；
});
})();

有人知道包含边界的代码是什么吗。如上所述，我希望平移一旦到达其网页上的“边界”就停止。此外，代码还显示了它作为一个整体的外观

---

非常感谢。

欢迎来到stackoverflow。我们邀请您缩进代码以提高可读性。我还邀请你阅读有关如何形成一个体面问题的技巧。