Jquery 如何按如下方式放大图像？

我想在鼠标点击时放大一幅图像，这样除了放大点击点外，点击点还停留在鼠标光标下（很像谷歌地图缩放）。我知道如何在CSS3中做到这一点，但我想在JavaScript中做到这一点。

如果你能在CSS3中做到这一点，你可以使用jquery的

.css（）

函数来实现同样的效果

---

请参见

如果您可以在CSS3中执行此操作，您可以使用jquery的

.css（）

函数来实现相同的效果

请参见

使用animate（）执行此操作，并设置左/顶位置和宽度值

我写了一个演示，作为概念证明：

jQuery：

$('.imageHolder img').bind('click', function(e) {

    var _this = $(this),
        scale = 3;

    // Store default width
    if(_this.data('defWidth') == undefined) {
        _this.data('defWidth', _this.width());
    }

    if (_this.width() > _this.data('defWidth')) {

        // Reset image
        _this.animate({
            'left': 0,
            'top': 0,
            'width': _this.data('defWidth')
        });

    } else {
        // Localise clicked position
        var imgHitX = e.pageX - _this.offset().left,
            imgHitY = e.pageY - _this.offset().top;

        // Calculate position offset
        var left = ((imgHitX * scale) - imgHitX) * -1,
            top = ((imgHitY * scale) - imgHitY) * -1;

        // Scale image
        _this.animate({
            'left': left,
            'top': top,
            'width': _this.width() * scale
        });
    }

});

HTML:

您可以使用animate（）执行此操作，并设置左/顶位置和宽度值

我写了一个演示，作为概念证明：

jQuery：

$('.imageHolder img').bind('click', function(e) {

    var _this = $(this),
        scale = 3;

    // Store default width
    if(_this.data('defWidth') == undefined) {
        _this.data('defWidth', _this.width());
    }

    if (_this.width() > _this.data('defWidth')) {

        // Reset image
        _this.animate({
            'left': 0,
            'top': 0,
            'width': _this.data('defWidth')
        });

    } else {
        // Localise clicked position
        var imgHitX = e.pageX - _this.offset().left,
            imgHitY = e.pageY - _this.offset().top;

        // Calculate position offset
        var left = ((imgHitX * scale) - imgHitX) * -1,
            top = ((imgHitY * scale) - imgHitY) * -1;

        // Scale image
        _this.animate({
            'left': left,
            'top': top,
            'width': _this.width() * scale
        });
    }

});

HTML:

多好的回答啊！哈哈：）不，我不想使用CSS3。我想在没有CSS3的情况下做这件事。多好的答案啊！哈哈：）不，我不想使用CSS3。我想在没有CSS3的情况下完成它。

body {
    background: #000;
}
.imageHolder {
    position:relative;
    margin: 50px;
}
.imageHolder img {
    position:absolute;
    left:0px;
    top:0px;
}