如何使用jQuery放大图像 [英] how to zoom in an image using jquery
问题描述
我只是想知道如何使用jquery放大图片，
I was just wondering how it's possible to zoom in a pic using jquery,
类似此网站
当您点击大图时，它将放大，并且可以移动光标并在放大时看到图片的另一部分，
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.
谢谢
推荐答案
它们不会放大，真正发生的是，当您单击缩放"文本时，div内的图像将替换为该图像的较大版本.图像.并且溢出设置为隐藏.
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.
当您使用一些聪明的JavaScript和DOM处理来移动光标时，图像只是相对地简单地移动，从而产生实际上是放大图片的效果.
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.
我将尝试为您创建一个简单的示例.
I'll try to create up a simple example for you.
编辑
抱歉，花了一段时间，但是在这里:
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>
您将需要相应地调整缩略图和全尺寸图像的宽度和高度.但是只需复制上面的内容以查看在imageshack上托管的图像的示例.
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.
这篇关于如何使用jQuery放大图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
