0

コードを記述しましたが、ページを開いたときに画像を縮小/拡大しようとしています。これを自動的に実行したい（おそらく単純なjQueryアニメーション）。

ただし、マウスホバーで機能させることはできます。ページを開いたときに欲しいです。

私のコード： http： //jsfiddle.net/THfCe/

コード：

<style>
    #photos img {
        width: 100%;
        height: 100%;
        transition: width 2s, height 2s, transform 2s;
        margin-left: -10px;
    }
    #photos img:hover {
        width: 110%;
        height:110%;
    }
</style>
<div id="photos">
    <img src="http://www.oprant.com/images/p_slide1.png" alt="Main" id="mainpicture" class="resize" />
</div>
4

2 に答える 2

1

これが私が作成したデモです。これがあなたが試している機能であるかどうかを確認してください-

デモ(更新)

jQuery -

$(document).ready(function() {
  repeat();
});

function repeat()
{
$("#myImg").animate({
        left: '50px',
        height: '45px',
        width: '50px'
    }, "slow");
    $("#myImg").animate({
        left: '0px',
        width:'34px',
        height: '37px',
    }, "slow",repeat);
}

更新: アニメーションが特定の画像にのみ適用されるように、画像タグに Id を指定します。

于 2013-01-02T06:23:41.390 に答える
0

あなたの質問を正しく理解できれば、ブラウザのビューポートと同じ大きさの画像が必要です。その場合、コードはほとんど完成しています。画像のコンテナーも 100% の幅/高さになるように設定する必要があります。

html, body, #photos { width: 100%; height: 100%; }

幅/高さが 100% の要素は、そのコンテナーと同じ大きさにしかできません。あなたの場合、html、body、および photos 要素。追加のコンテナーがある場合は、上記の CSS コードに追加する必要があります。

于 2013-01-02T05:59:55.253 に答える