我只是想知道如何使用jquery放大图片，
像这个网站，
当你点击大图像时它会放大，你可以移动光标并在放大时看到图片的其他部分，
如果有人能给我看一个链接或让我朝着正确的方向前进，我会很感激。
感谢
答案 0 :(得分：19)
它们不会放大，实际发生的是当您单击缩放文本时，div内的图像将被该图像的较大版本替换。溢出设置为隐藏。
当您移动光标时，使用一些聪明的JavaScript和DOM处理，图像只需相对移动，创建实际放大图片的效果。
我会尝试为你创建一个简单的例子。
修改
抱歉需要一段时间，但现在是：
<!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>
您需要相应地调整缩略图和全尺寸图像的宽度和高度。但只需复制粘贴上面的内容即可查看imageshack上托管的图片示例。
答案 1 :(得分：3)
gzoom，miniZoomPan，WarpZoom和Image Detail插件都让这种事情变得简单。你可以在这里找到它们：
http://plugins.jquery.com/taxonomy/term/1848
也可能有其他人。
希望有所帮助！
的问题列出了更多内容答案 2 :(得分：1)
您需要的不仅仅是简单的缩放。但是在固定视口内的缩放和平移功能。您提供的网站可能从头开始编码。我找到了一个不完全相同的，但你可能想看看here。
与此同时，我很想知道Sbm007的例子。
答案 3 :(得分：0)
Asos.com从头开始编码，看看Firebug如何：http://www.asos.com/assets/asosCom/js/libs/asos.js.utils.productpage.js
答案 4 :(得分：0)
嘿amir我正在添加一个教程链接，它是您搜索的正确解决方案，从以下链接尝试教程，它还可以帮助您以其他三种方式放大图像......
http://www.jacklmoore.com/zoom/
我试过这个并且它工作正常。