jQuery 如何使用jquery放大图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1581784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to zoom in an image using jquery
提问by akano1
I was just wondering how it's possible to zoom in a pic using jquery,
我只是想知道如何使用 jquery 放大图片，
something like this web site,
类似这个网站的东西，
when you click on the big image it'll zoom in and you can move your cursor and see the other part of the pic while zoomed in,
当您单击大图像时，它会放大，您可以移动光标并在放大时查看图片的其他部分，
I'd appreciate it if someone could show me a link or put me in the right direction.
如果有人能给我一个链接或让我找到正确的方向，我将不胜感激。
thanks
谢谢
回答by Waleed Amjad
They don't zoom in, what is really happening is that when you click the Zoom text, the image inside the div is replaced by a larger version of that image. And overflow is set to hidden.
它们不会放大，真正发生的是当您单击“缩放”文本时，div 内的图像被该图像的更大版本替换。并且溢出设置为隐藏。
As you move your cursor, using some clever JavaScript and DOM handling, the image is simply moved relatively accordingly, creating the effect you are actually zooming in the picture.
当您移动光标时，使用一些巧妙的 JavaScript 和 DOM 处理，图像会相应地进行相对移动，从而创建您实际放大图片的效果。
I'll try to create up a simple example for you.
我会尝试为您创建一个简单的示例。
EDIT
编辑
Sorry took a while but here it is:
抱歉花了一段时间，但这里是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var fullWidth = 864; // Width in pixels of full-sized image
var fullHeight = 648; // Height in pixels of full-sized image
var thumbnailWidth = 389; // Width in pixels of thumbnail image
var thumbnailHeight = 292; // Height in pixels of thumbnail image
// Set size of div
$('#picture').css({
'width': thumbnailWidth+'px',
'height': thumbnailHeight+'px'
});
// Hide the full-sized picture
$('#full').hide();
// Toggle pictures on click
$('#picture').click(function() {
$('#thumbnail').toggle();
$('#full').toggle();
});
// Do some calculations
$('#picture').mousemove(function(e) {
var mouseX = e.pageX - $(this).attr('offsetLeft');
var mouseY = e.pageY - $(this).attr('offsetTop');
var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth);
var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight);
$('#full').css({
'left': '-' + posX + 'px',
'top': '-' + posY + 'px'
});
});
});
</script>
<style type="text/css">
#picture {
overflow: hidden;
position: relative;
border: 1px solid #000000;
}
#thumbnail {
cursor: pointer;
}
#full {
position: relative;
cursor: crosshair;
}
</style>
</head>
<body>
<div id="picture">
<img alt="" id="thumbnail" src="http://img202.imageshack.us/img202/8403/93629325.jpg" />
<img alt="" id="full" src="http://img111.imageshack.us/img111/4734/tbmecsekyellowflower.jpg" />
</div>
</body>
</html>
You will need to adjust the thumbnail and full-sized image width and height accordingly. But simply copy paste the above to see an example of an image hosted on imageshack.
您需要相应地调整缩略图和全尺寸图像的宽度和高度。但只需复制粘贴以上内容即可查看托管在 imagehack 上的图像示例。
回答by No Surprises
The gzoom, miniZoomPan, WarpZoom, and Image Detail plugins all make this sort of thing easy. You can find them all here:
gzoom、miniZoomPan、WarpZoom 和 Image Detail 插件都使这种事情变得容易。你可以在这里找到它们：
http://plugins.jquery.com/taxonomy/term/1848
http://plugins.jquery.com/taxonomy/term/1848
There are probably others too.
可能还有其他人。
Hope that helps!
希望有帮助！
EDIT: There are several more listed on a previous question called What's the best jQuery product zoom plugin?
编辑：在上一个名为什么是最好的 jQuery 产品缩放插件的问题中列出了更多内容？
回答by o.k.w
What you need is not just plain zooming. But a zoom and pan function within a fixed viewport. The website you gave probably code it from scratch. I found one for you which is not exactly the same, but you might want totake a look here.
您需要的不仅仅是简单的缩放。但是在固定视口内的缩放和平移功能。您提供的网站可能从头开始编码。我为你找到了一个不完全相同的，但你可能想看看这里。
Meanwhile, I'm eager to see what Sbm007's example.
同时，我也很想看看 Sbm007 的例子。
回答by Andrew Kolesnikov
Asos.com coded theirs from scratch, see how with Firebug: http://www.asos.com/assets/asosCom/js/libs/asos.js.utils.productpage.js
Asos.com 从头开始编码，看看如何使用 Firebug：http: //www.asos.com/assets/asosCom/js/libs/asos.js.utils.productpage.js
回答by Shital Jachak
Hey amir I am adding one tutorial link and it's proper solution for your search, try tutorial from following link, it will also help you for zoom in image in 3 other different ways...
嘿阿米尔，我正在添加一个教程链接，它是您搜索的正确解决方案，请尝试以下链接中的教程，它还将帮助您以其他 3 种不同方式放大图像...
http://www.Hymanlmoore.com/zoom/
http://www.Hymanlmoore.com/zoom/
i had tried this and it's working fine.
我试过这个，它工作正常。
