2

我认为这应该是一件简单的事情，但我没有看到一个明确的方法来做到这一点。

我想这样当用户将鼠标悬停在图像上时，图像会变大 10%，然后当用户将鼠标移开时返回到其原始大小。

我想我会想要使用 jQueryhover函数，但我不知道要传递给hover.

$('.resizableImage').hover(makeBigger, returnToOriginalSize);
4

6 回答 6

6

jQuery 让您可以使用+=和%. 所以这两个人一起做你想做的事。

$('.resizableImage').hover(makeBigger, returnToOriginalSize);

function makeBigger() {
    $(this).css({height: '+=10%', width: '+=10%'});
}
function returnToOriginalSize() {
    $(this).css({height: "", width: ""});
}

演示：http: //jsfiddle.net/rZaAE/

于 2012-10-31T15:32:44.263 回答
2

例如，您可以使用 CSS3 转换属性来做到这一点

$('.resizableImage').hover(function(){
   $(this).css("transform", "scale(1.1, 1.1)");
}, function(){
   $(this).css("transform", "none");
});
于 2012-10-31T15:30:14.097 回答
2

如果没有 CSS3，您可以简单地使用.width()和.height()方法获取原始大小，将其存储在数据属性中并调整大小。在 mouseout 上只需恢复原始值。

var hoverRatio = 1.1;

$('.resizableImage').hover(function() {
    $(this).data('width', $(this).width());
    $(this).data('height', $(this).height());
    $(this).css({
        width: $(this).width() * hoverRatio,
        height: $(this).height() * hoverRatio 
    });
}, function() {
    $(this).css({
        width: $(this).data('width'),
        height: $(this).data('height')
    });
});​

见演示。

于 2012-10-31T15:32:29.127 回答
1

您还应该在动画上使用停止，这样当用户在动画完成之前移出时它不会被打断

html:

<img src="http://placehold.it/350x150" class="resizableImage" width="350" height="150" />​

js：

$('.resizableImage').mouseenter(function() {
    $(this).stop().animate({ width: "+=10%", height: "+=10%" });
});

$('.resizableImage').mouseleave(function() {
    var x = $(this).attr('width'),
        y = $(this).attr('height');

    $(this).stop().animate({ width: x, height: y });
});

​</p>

这是一个小提琴：http: //jsfiddle.net/tWdAK/1/

于 2012-10-31T15:35:30.863 回答
1

你不能只用css做到这一点：

CSS

.resizable_img {
    position: relative; // needed for z-index to work
    width: 100%;
    height: auto; // will resize image proportionally

}

.resizable_img:hover {
    width: 120%;
    z-index: 1; // place image on top
}

.img_container {
    width: 25%;
    position: relative;
    overflow: visible; // stops images being shifted 
    float:left;
}

HTML

<div class="contents">
    <div class="img_container">
        <img class="resizable_img" src="img.jpg">
    </div>
</div>

在这里提琴

于 2012-10-31T15:40:50.987 回答
0

如果您不使用内联样式，则可以省略将旧值保存在数据中并使用样式 attr 代替。

$('.element').hover(function() {
    var el = $(this);
    el.attr('style','width:'+el.width() * 1.1 + 'px;height:'+el.height() * 1.1 + 'px;');   
}, function() {
    $(this).removeAttr('style');
});​
于 2012-10-31T15:34:01.297 回答