javascript - 仅使用一张图像放大图像

Question

我正在尝试实现一个非常简单的目标，即放大图像。在网上搜索后，似乎大多数 js 脚本都需要两张图片（一张用于缩略图大小，另一张用于缩放大小）。我想知道如果我只有一张图像，是否仍然可以实现缩放效果？

我希望在免费版本中实现类似这个链接jQuery ImageZoom的东西，当然，只有一个图像。

Answer 1

我最近写了Magnifier.js，如果你不提供大图，将使用缩略图

Answer 2

您可以使用Magic Zoom使用一张图像进行缩放 - 您只需在src和href中引用相同的大图像，然后使用宽度和高度来强制 img 缩小到您想要的大小。

例如：

<a href="your-big-image.jpg" class="MagicZoom"><img src="your-big-image.jpg" width="300" height="150"></a>

这种方法很好，但不建议这样做，因为它会在大图像下载时产生延迟。

如果您不介意角落中显示的信息，您可以免费使用 Magic Zoom 的试用版。

Answer 3

没有为此目的编写任何复杂的代码，您只需要考虑这些步骤 1.创建放大镜玻璃元素并将要放大的图像设置为背景图像，然后为此设置比例（1.5）或 2（您应该考虑到您的玻璃元素可以说是 50 像素中的 50 像素，而您的背景图像是 500 像素中的 500 像素，这有助于我们做到这一点） 2.当您的鼠标指针进入图片框时，放大镜应该追踪 jquery 进入的指针 3 .您应该获得指针的偏移量，然后同时更改放大镜的背景位置。jquery 代码会是这样的

   $(".mpboxpic").mouseenter(function () {
    $("#zoombox").css({ "background": "url('" + $(this).attr("src") + "') no-repeat" })
    //با این کد تصویر پس زمینه دارای سایز یکسانی خواهد شد
    $("#zoombox").css({ "background-size": $(this).width() + "px " + $(this).height() + "px" })
}).mouseleave(function () {
    $("#zoombox").hide()
    var tg = $("#zoombox").css("background-image")
    px = 0;
    py = 0;
})
$(".mpboxpic").mousemove(function (p) {
    if (px==0) {
        $("#zoombox").fadeIn(200)
    }
    //با کد های زیر  مرکز دایره دقیقا در زیر موس قرار میگیرد
     px = p.pageX-$("#zoombox").height()/2
     py = p.pageY - $("#zoombox").width() / 2    
    $("#zoombox").css({ "top": py + "px", "left": px + "px", "position": "absolute" });
    var my = p.pageY - ($(this).offset().top + $("#zoombox").height() / 4)
    var mx = p.pageX - ($(this).offset().left + $("#zoombox").width() / 4)
    var coord = "-" + mx + "px " + " -" + my + "px"
    $("#zoombox").css({"background-position":coord})
})

和CSS

    #zoombox{
display:none;
position:absolute;
border:5px solid rgba(248, 243, 243, 0.72);
top:25%;
left:25%;
z-index:5;
height:50px;
width:50px;
border-radius:100px;
pointer-events:none;
transform:scale(2);
}

mpboxpic 是您的主要图片，而 zoombox 是您的 html 标签作为放大镜

<div id="zoombox">
</div>