2

2つの画像を並べて表示します。ユーザーが画像にカーソルを合わせると、画像が拡大するはずです。

HTML：

<a href="#"><div id="skinny"></div></a>
<a href="#"><div id="room9"></div></a>

jQuery：

$('#skinny').hover(function() {
    $(this).animate({width: '220px'}, 'fast');
    $('#room9').animate({width: '80px'}, 'fast');
}, function() {
    $(this).animate({width:'150px'},'fast');
    $('#room9').animate({width: '150px'}, 'fast');
});

jsFiddle： http: //jsfiddle.net/G4q4q/

左の画像では「動作」しますが、右の画像では動作しませんでした。私の現在の方法は非効率的ですので、それを最適化するための提案があれば、私に知らせてください。

4

2 に答える 2

2

さて、私は拡大/複数の画像を許可しない非常に大雑把な例を作成しましたが、あなたはアイデアを得る必要があります。clipCSSの要素に対して、overflow: hidden

jsFiddle： http: //jsfiddle.net/G4q4q/10/

HTML

<div id="wrap">
    <a href="#" id="skinny">
        <img class="image" src="http://www.theexoticvet.com/images/content_1.jpg" />
    </a>
    <a href="#" id="room9">
        <img class="image" src="http://www.theexoticvet.com/images/content_2.jpg" />
    </a>
</div>​

CSS

#wrap {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
}

a {
    display: block;
    float: left;
    top: 0;
    width: 50%;
    height: 300px;
    overflow: hidden;
}

javascript

$(function() {
    $('a').hover(function() {
        $(this).stop().animate({width: '80%'}, 'fast')
        $('a').not(this).stop().animate({width: '20%'}, 'fast');
    }, function() {
        $('a').stop().animate({width:'50%'},'fast');
    });
});

メモの編集：これを編集して、最初の試みよりも少し良くしました。

于 2012-05-21T06:34:24.150 に答える
1

私はこれのためのより一般的な方法を作るのに多くの時間を費やしました-それで、あなたがそれを使うかどうかにかかわらず、少なくともこれを見てください。クリスチャンが車輪の再発明で私を酷評することは知っていますが、それでも、彼がコメントを書くずっと前に私は始めました...ところで、あなたはそれらがどのように正しく機能するかを学びたいと思いましたか？そのために、私はこのプラグインをここで作成しました（Christianは今私を酷評しています）： http：//jsfiddle.net/hHzkS/

私はそれをコメントしました...疑問がある場合はコメントで尋ねてください...

于 2012-05-21T07:10:48.913 に答える