1

私は現在ウェブサイトで作業しています。ユーザーが画像の上にカーソルを置いたときに、画像の高さと幅を増やしたいと思っています。

これは、目的の出力のためのhttp://jsfiddle.net/amoeba/KdwwL/からの私のコードです。

HTML:

<img id="img-shadow" align="center" src="https://i2.sndcdn.com/artworks-000049446949-mwzm8s-t500x500.jpg?9d68d37" />

CSS:

#img-shadow {
    height:550px;
    width:550px;
    left:50px;
    top:50px;
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    box-shadow:1px 1px 10px black;
}

jQuery:

$(document).ready(function() {
    $('#img-shadow').hover(function() {
        $(this).stop().animate({
            'width: '565px',
            'height' : '565px',
            'left' : '45px',
            'top' : '45px'
        }, 300);
    }, function() {
        $(this).stop().animate({
            'width' : '550px',
            'height' : '550px',
            'left' : '50px',
            'top' : '50px'
        }, 360);
    });
});

これはまさに私が望んでいる効果ですが、問題は、画像にカーソルを合わせると、次の例のように残りのページのコンテンツに影響することです: http://jsfiddle.net/amoeba/Vwxev/

アニメーション画像の下にコンテンツを移動せずに同じ効果を得るにはどうすればよいですか?

**注: 2 番目の例では、position:absoluteプロパティを削除しています。私のウェブページでは、text-align:center. text-align:centerjsfiddle が中央に配置しないため、プロパティを削除しました。必要でないときにコンテンツを下に移動する方法を示したいだけです。

4

2 に答える 2

-1

私のコンピューターは何らかの理由でjQueryを嫌うため、これは機能しない可能性があり、テストできませんが、これを使用してみてください：

$(document).ready(function() {
    $('#img-shadow').hover(function() {
        $('#img-shadow').stop().animate({
            'width: '565px',
            'height' : '565px',
            'left' : '45px',
            'top' : '45px'
        }, 300);
    }, function() {
        $('#img-shadow').stop().animate({
            'width' : '550px',
            'height' : '550px',
            'left' : '50px',
            'top' : '50px'
        }, 360);
    });
});

これが機能しない場合は申し訳ありません。

于 2013-06-02T01:01:55.980 に答える