如何在图像上放大120%、150%和180%

How to zoom-in 120%, 150%, and 180% on an image?

本文关键字：150% 180% 120% 放大 图像      更新时间：2023-09-26

感谢您阅读我的文章。

我正在使用放大弹出-缩放功能。我想知道如何设置放大%，以及如何通过点击弹出图像来进行3种不同程度的放大。

我只想澄清一下我的障碍：例如，我想点击放大的弹出图像，然后放大到120%，第二次点击，放大到150%，第三次点击，缩小到180%，然后第四次点击，将缩小到100%。

有人知道怎么做吗？如果是的话，对我帮助很大。非常感谢！

原始代码（作品）：


$('#img').magnificPopup({ 
          delegate: 'a',
          type: 'image',
          callbacks: {
              open: function() {
                $(".mfp-figure figure").css("cursor", "zoom-in");
                $(".mfp-figure figure").zoom({ 
                    on: "click",
                    onZoomIn: function () {
                        $(this).css("cursor", "zoom-out");
                    },
                    onZoomOut: function () {
                        $(this).css("cursor", "zoom-in");
                    }
                });
              },
              close: function() {
                // Will fire when popup is closed
              }
              // e.t.c.
            }
        });

我的代码（不起作用）：


$('#img').magnificPopup({ 
          delegate: 'a',
          type: 'image',
          callbacks: {
              open: function() {
                $(".mfp-figure figure").css("cursor", "zoom-in");
                $(".mfp-figure figure").zoom({ 
                    on: "click",
                    onZoomIn: function () {
                        $(this).zoom({
                            on: "click",
                            onZoomIn: function(){
                            },
                            onZoomOut: function(){
                            }
                        });
                        $(this).css("cursor", "zoom-out");
                    },
                    onZoomOut: function () {
                        $(this).css("cursor", "zoom-in");
                    }
                });
              },
              close: function() {
                // Will fire when popup is closed
              }
              // e.t.c.
            }
        });

最后，我放弃了放大镜弹出-缩放功能，取而代之的是css-缩放功能。

解决方案：


`var zoom_percent = "100";
        function zoom(zoom_percent){
            $(".mfp-figure figure").click(function(){
                switch(zoom_percent){
                    case "100":
                        zoom_percent = "120";
                        break;
                    case "120":
                        zoom_percent = "150";
                        break;
                    case "150":
                        zoom_percent = "200";
                        $(".mfp-figure figure").css("cursor", "zoom-out");
                        break;
                    case "200":
                        zoom_percent = "100";
                        $(".mfp-figure figure").css("cursor", "zoom-in");
                        break;
                }
                $(this).css("zoom", zoom_percent+"%");
            });
        }
        $('#img').magnificPopup({ 
          delegate: 'a',
          type: 'image',
          callbacks: {
              open: function() {
                  $(".mfp-figure figure").css("cursor", "zoom-in");
                  zoom(zoom_percent);
              },
              close: function() {
                // Will fire when popup is closed
              }
              // e.t.c.
            }
        });`

希望这能帮助到同样在寻找它的人。

您可以使用以下代码。这是一个简单的示例，您可以根据代码进行修改。

$("img").click(function(){
    var zoom = parseInt($(this).css("zoom"));
    if(zoom==180){
        $(this).css("zoom","100%");
    }else{
        $(this).css("zoom",zoom+20+"%");
    }
});

希望能有所帮助。

相关文章：