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（你应该考虑你的玻璃元素可以说50px 50px而背景图像是500px in 500px这有助于我们做到这一点） 2.当你的鼠标指针进入图片框时，放大镜玻璃应该追随jquery进来的指针 3.你应该偏移指针然后改变背景位置放大镜玻璃同时。 jquery代码就是这样的

void sendEvent(event) {
  if(event==down) ......


.......

}

和css

   $(".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})
})

mpboxpic是你的主要图片，缩放框是你的html标签作为放大镜玻璃

    #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);
}

仅使用一个图像放大图像

3 个答案: