仅使用一个图像放大图像

Magnify image using only one image

本文关键字：图像 一个 放大      更新时间：2023-09-26

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

我希望在免费版本中仅使用一张图像实现类似链接jQuery ImageZoom的东西。

我最近写了放大镜.js，如果您不提供大图像，将使用缩略图

您可以使用一个图像通过魔术缩放进行缩放 - 您只需在 src 和 href 中引用相同的大图像，并使用宽度和高度将 img 强制缩小到您想要的大小。

例如：

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

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

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

不需要

为此目的编写任何复杂的代码您只需要考虑以下步骤1.创建放大镜玻璃元素并将要放大的图像设置为背景图像，然后为此设置比例（1.5）或2（您应该考虑到您的玻璃元素可以说50px的50px，而您的背景图像是500px的500px，这有助于我们解决问题）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>
相关文章：