Question

我希望在鼠标单击时放大图像，这样除了放大点击位置保持在鼠标光标下（很像谷歌地图缩放）。我知道如何在CSS3中做到这一点，但我想用JavaScript做。

Answer 1

您可以使用animate（）并设置左/上位置和宽度值。

以下是我作为概念证明撰写的演示：http://jsfiddle.net/7PzGQ/

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：

<div class="imageHolder">
    <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" />
</div>

CSS：

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

Answer 2

如果你可以在CSS3中完成，你可以使用jquery的.css()函数来实现相同的效果。

请参阅http://api.jquery.com/css/

如何按比例放大图像？

2 个答案: