1

マウスオーバーで画像を左右にアニメーション化しようとしていますが、マウスアウトすると前の状態に戻ります。

たとえば、画像の元の幅が120ピクセルの場合、ページの読み込み時に100ピクセルが表示され、マウスオーバーすると左右に拡大します。したがって、左に10ピクセル、右に10ピクセル大きくなります。

<img src="http://st.depositphotos.com/1742172/2000/v/110/depositphotos_20007761-Old-scroll-banner-cartoon.jpg" id="expandimg" />

デモ http://jsfiddle.net/squidraj/9FtBY/5/

でも今は右側だけに拡大しています。どんな提案でも素晴らしいでしょう。

css3にクリップと呼ばれるものがあることを発見しましたか？

4

4 に答える 4

0

さて、基本的にあなたのコードは正しいです。画像が左揃えになっているため、アニメーションは右に拡大するように見えます。

それをdivで包み、それを中央に揃えると、「見栄えが良くなります」。

<div class="wrapper"><img src="http://st.depositphotos.com/1742172/2000/v/110/depositphotos_20007761-Old-scroll-banner-cartoon.jpg" id="expandimg" /></div>

http://jsfiddle.net/GVdmF/

画像が引き伸ばされるため、引用符で「良好」です。背景画像を使用するソリューションを使用することをお勧めします。ちょっと待ってください、私に何ができるかわかるかもしれません。

編集：ここでまた行きます：http：//jsfiddle.net/GVdmF/2/

  • 写真をleft.png、center.png、right.pngの3つの部分に分割しました。
  • center.pngをdivに追加しました
  • 疑似クラス：beforeと：afterを追加し、それらをブロック要素にし、height / widetと、対応するbackground-imagesleft.pngとright.pngも追加しました。

あなたのJSはほとんど同じままでした。これがお役に立てば幸いです。

于 2013-03-05T17:40:29.913 に答える
0

親コンテナを基準にした絶対位置をホバーと組み合わせて使用max-width​​し、ホバー時にmax-heightリセットします。none

.img:hover img {
    position: absolute;
    max-width: none;
    max-height: none;
    left: -25%;
    top: -25%;
}

http://jsfiddle.net/xv9dh/

UPD。デモが表示されなかったので、おそらく私の答えは関係ありません。

于 2013-03-05T17:40:32.360 に答える
0

それは2つの方法で純粋なCSSで行うことができます（少なくとも！）：

http://jsfiddle.net/9FtBY/10/

#expandimg {
    height: 100px;
    width: 100px;
    margin-left: 10px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -moz-transition: 0.3s;
}

#expandimg:hover {
    width: 120px;
    margin-left: 0px;    
}

または2番目のもの、position: absolute;

http://jsfiddle.net/9FtBY/7/

#expandimg {
    height: 100px;
    width: 100px;
    left: 10px;
    position: absolute;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -moz-transition: 0.3s;
}

#expandimg:hover {
    width: 120px;
    left: 0px;    
}
于 2013-03-05T17:42:18.723 に答える
0

そのシンプルなanimationコンセプト、

animate要素をインクリメントしてwidth移動し、ストレッチ効果のように表示する必要がある場合。これを使うだけで

Left = Left - (incrementedWidth/2)

それを元に戻すには、

Left = Left + (incrementedWidth/2)

コード：

$(document).ready(function () {
    $("#expandimg").mouseover(function () {
        $(this).stop().animate({
            //Decrement Left in pixel = 20/2 [20 increment in width]
            left: "-=10", 
            width: '120px'
        }, "fast"); 
    });
    $("#expandimg").mouseout(function () {
        $(this).stop().animate({
            //Increment Left in pixel = 20/2 [20 decrement in width]
            width: '100px',
            left: "+=10"
        }, "fast"); 
    });
});

[注：プロパティを使用している場合、それにアクセスするには、leftのような位置を設定しておく必要がありますabsolute。]

デモ

于 2013-03-05T17:56:23.067 に答える