如何使用jQuery缩放div内容？

Question

我有一个父级<div>。在里面我放了一些文本和图片。现在我需要缩放到该父<div>的特定部分。是否可能？

- KarSho

---

请提供 jsfiddle 链接。 - Karthi Keyan

相关/重复：JavaScript缩放整个Div，如何缩放整个div？ - Benjamin Crouzier

请查看这个 JSFiddle：http://jsfiddle.net/D7cn8/ - Anshu

这通常是无法解决的问题，想象一下你在 div 中有两张图片，每张占据 50% 的宽度，当进行缩放时，你期望会发生什么？ - efkah

哦，也看看我的代码片段吧！！ - adeneo

你想在鼠标悬停、点击缩放按钮或页面加载时缩放特定部分吗？ - Gadde

Answer 1

如果您希望在鼠标悬停时放大该图像：

$(document).ready( function() {
$('#div img').hover(
    function() {
        $(this).animate({ 'zoom': 1.2 }, 400);
    },
    function() {
        $(this).animate({ 'zoom': 1 }, 400);
    });
});

如果使用缩放按钮，您可以这样做：

$("#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
    );
}

- Gadde

---

问题是关于 div 而不是图片，对吧？这样行不通。 - Pablo

@Pablo，如果你花一点努力将其适应到你的情况，它就会奏效。 - Kennyomar

@Pablo 如果你想用div来实现这个效果，你可以修改代码并尝试一下。以上代码是用于将图片在div中放大。 - Gadde

Firefox 不支持 zoom。 - adamj

Answer 2

@Gadde - 你的回答非常有帮助。谢谢！我需要一个类似于“Maps”的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');
            })
    });

- ter24

Answer 3

 $('image').animate({ 'zoom': 1}, 400);

- user1912656

Answer 4

使用zoom-master/jquery.zoom.js。图片的缩放效果非常完美。这是页面的链接。 http://www.jacklmoore.com/zoom/

 <script>
    $(document).ready(function(){
        $('#ex1').zoom();

    });
</script>

- Nik