2

これは簡単なことだと思いましたが、明確な方法がわかりません。

ユーザーが画像の上にマウスを置くと、画像が10％大きくなり、ユーザーがマウスを離すと元のサイズに戻るようにしたいと思います。

jQuery関数を使いたいと思いますが、hoverどの関数を渡すのかわかりませんhover。

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

6 に答える 6

6

jQuery では、 と を使用でき+=ます%。したがって、これら2つが一緒になって、あなたが望むことを行います。

$('.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 tranform プロパティでそれを行うことができます

$('.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()メソッドを使用して元のサイズを取得し、データ属性に保存してサイズを変更するだけです。マウスアウト時に元の値を復元するだけです。

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

You should use stop on the animation also so it doesn't get interrupted when the user moves out before the animation has finsihed

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>

Here is a fiddle: 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

インライン スタイルを使用していない場合は、古い値をデータに保存することを省略し、代わりにスタイル属性を使用できます。

$('.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 に答える