我正在尝试实现一个非常简单的目标，即放大图像。在网上搜索后，似乎大多数 js 脚本都需要两张图片（一张用于缩略图大小，另一张用于缩放大小）。我想知道如果我只有一张图像，是否仍然可以实现缩放效果？
我希望只用一张图片来实现类似这个链接jQuery ImageZoom 的东西，当然，在免费版中。
【问题讨论】：
标签： javascript jquery asp.net html magnify
没有为此目的编写任何复杂的代码 你只需要考虑这些步骤 1.创建放大镜玻璃元素并将您想要放大的图像设置为背景图像，然后为此设置比例（1.5）或2（您应该考虑到您的玻璃元素可以说是50px in 50px，而背景图像是500px in 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>
【讨论】：
我最近写了Magnifier.js，如果您不提供大图，将使用缩略图代替
【讨论】：
您可以使用Magic Zoom 缩放一张图像 - 您只需在 src 和 href 中引用同一个大图像并使用 width 和 height 强制 img 小到你想要的大小。
例如：
<a href="your-big-image.jpg" class="MagicZoom"><img src="your-big-image.jpg" width="300" height="150"></a>
这种方法很好，但不建议这样做，因为它会在大图像下载时产生延迟。
如果您不介意角落显示的信息，您可以免费使用 Magic Zoom 的试用版。
【讨论】：