如何使用 imgViewer Plugin 设计图像的缩放功能？

在本文中，我们将学习使用 jQuery imgViewer插件实现图像缩放和平移。从此链接下载插件并收集工作文件夹中的所有预编译文件。

CDN链接：

 
 
 
 
 
 

注意：开发人员应注意根据需要将依赖项（文件）保存在正确的文件夹路径中。

示例 1：在此示例中，在代码的 HTML 部分放置一个图像元素，并使用 JavaScript 块将插件附加到图像。

HTML

 

    
    
    
    
    
    
    
    
    
    
    
    
    
 

 

    
        
            
        
    
                
                    GeeksforGeeks
                
                
                    
                     

 
                    Zoom On
                     

 
                    Zoom:
                    
                    
                    Maximum Zoom:
                    
                
            
 
    
        ; (function ($) {
            $(window).on("load", function () {
                $(document).ready(function () {
 
                    var $zoom = $('#zoom');
 
                    var $img = $("#image1").imgViewer({
                        zoomMax: 2,
                        zoomable: false,
                        draggable: false,
                        onReady: function () {
                            this.options.zoom = 2;
                            this.panTo(1, 1);
                        },
                        onUpdate: function () {
                            $zoom.val(this.options.zoom);
                        }
                    });
 
                    var $toggleZ = $("#toggleZoom");
                    if ($img.imgViewer("option", "zoomable"))
                        $toggleZ.text("Zoom Off");
                    else
                        $toggleZ.text("Zoom On");
 
                    $toggleZ.on("click", function () {
                        var $this = $(this);
                        if ($this.text() == "Zoom On") {
                            $this.text("Zoom Off");
                            $img.imgViewer("option", "zoomable", true);
                        } else {
                            $this.text("Zoom On");
                            $img.imgViewer("option", "zoomable", false);
                        }
                    });
                    $zoom.on('change', function (e) {
                        $img.imgViewer("option", "zoom", $(this).val());
                    });
                    var mxZoom = $img.imgViewer("option", "zoomMax");
                    if (mxZoom !== null) {
                        $('#mxzoom').val(mxZoom);
                    }
                    $('#mxzoom').on('change', function (e) {
                        $img.imgViewer("option",
                        "zoomMax", $(this).val());
                    });
                });
            });
 
        })(jQuery);
    

 

输出：

示例 2：以下代码演示了 onclick 事件。

HTML

 

    imgViewer Plugin
    
 
    
    
    
    
    
    
    
    
    
    
    
    
    

 

    imgViewer Plugin onclick event
    
        
    
 
    
        ; (function ($) {
            $(window).on("load", function () {
                $(document).ready(function () {
                    var $img = $("#image1").imgViewer({
                        onClick: function (e) {
                            var $message =
                                $("<div id='dialog-modal'></div>").dialog({
                                    modal: true,
                                    title: "You clicked at:",
                                });
                            var pos = this.cursorToImg(e.pageX, e.pageY);
                            var imgpos = this.relposToImage(pos);
                            $message.html("Page X: " + e.pageX +
                                "<br/>Page Y: " + e.pageY +
                                "<br/>Image Pixel X: " + imgpos.x +
                                "<br/>Image Pixel Y: " + imgpos.y +
                                "<br/>Image Rel X: " + pos.x.toFixed(3) +
                                "<br/>Image Rel Y: " + pos.y.toFixed(3));
                        }
                    });
                });
            });
        })(jQuery);
    

 

输出：