Javascript 如何使用 jquery 缩放 div 内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13931225/
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 div content using jquery?
提问by KarSho
I have a parent <div>. Inside that I place some text and images. Now I need to zoom to a particular portion of that parent <div>. Is it possible?
我有一个家长<div>。在里面我放了一些文字和图片。现在我需要缩放到该 parent 的特定部分<div>。是否可以？
回答by Gadde
If you want that image to be zoomed on mouse hover :
如果您希望在鼠标悬停时放大该图像：
$(document).ready( function() {
$('#div img').hover(
function() {
$(this).animate({ 'zoom': 1.2 }, 400);
},
function() {
$(this).animate({ 'zoom': 1 }, 400);
});
});
?or you may do like this if zoom in and out buttons are used :
?或者，如果使用放大和缩小按钮，您可能会这样做：
$("#ZoomIn").click(ZoomIn());
$("#ZoomOut").click(ZoomOut());
function ZoomIn (event) {
$("#div img").width(
$("#div img").width() * 1.2
);
$("#div img").height(
$("#div img").height() * 1.2
);
},
function ZoomOut (event) {
$("#div img").width(
$("#imgDtls").width() * 0.5
);
$("#div img").height(
$("#div img").height() * 0.5
);
}
回答by ter24
@Gadde - your answer was very helpful. Thank you! I needed a "Maps"-like zoom for a div and was able to produce the feel I needed with your post. My criteria included the need to have the click repeat and continue to zoom out/in with each click. Below is my final result.
@Gadde - 您的回答非常有帮助。谢谢！我需要一个类似于“地图”的 div 缩放，并且能够通过您的帖子产生我需要的感觉。我的标准包括需要重复点击并在每次点击时继续缩小/放大。下面是我的最终结果。
var currentZoom = 1.0;
$(document).ready(function () {
$('#btn_ZoomIn').click(
function () {
$('#divName').animate({ 'zoom': currentZoom += .1 }, 'slow');
})
$('#btn_ZoomOut').click(
function () {
$('#divName').animate({ 'zoom': currentZoom -= .1 }, 'slow');
})
$('#btn_ZoomReset').click(
function () {
currentZoom = 1.0
$('#divName').animate({ 'zoom': 1 }, 'slow');
})
});
回答by ter24
$('image').animate({ 'zoom': 1}, 400);
回答by N Czar
Used zoom-master/jquery.zoom.js. The zoom for the image worked perfectly. Here is a link to the page. http://www.Hymanlmoore.com/zoom/
使用 zoom-master/jquery.zoom.js。图像的缩放效果很好。这是该页面的链接。 http://www.Hymanlmoore.com/zoom/
<script>
$(document).ready(function(){
$('#ex1').zoom();
});
</script>
