0

以下のスクリーンショットのようなものを作成したいと思います。上の大きな画像がメイン表示になり、下のサムネイルをクリックすると上の大きな画像がサムネイル画像に変わります。

ps は「トップに戻る」テキストを無視します。

javascipt/jqueryでこれを行う簡単な方法はありますか?

ここに画像の説明を入力

4

2 に答える 2

2

これを行うにはいくつかの方法があります。最も簡単な方法は、次のように 1 つの画像を使用することです。

<img src="myimg.jpg" class="thumb" title="Click Me" />

<div id="view"><img /></div>

いくつかの JS/jQuery を使用して、次のことを行います。

$(function(){
    $(document).on('click', '.thumb', swapImage); //wire up click event
});

function swapImage() { 
    var thumb = $(this);
    //steal src from thumb and pop it into main img
    $('#view').find('img').attr('src', thumb.attr('src'));
}

サムネイルに CSS を配置して縮小するようにしてください。ただし、#view画像はフルサイズにしてください。もちろん、これは最善の方法ではありませんが、正しい方向に導く方法の 1 つです。

2 番目の方法は、2 つの画像を作成することです。1 つはサムネイル用、もう 1 つはメイン画像用です。厳密な命名規則に従う場合は、上記のコードを使用できますが、swapImage()関数内で次のようなことを行うことができます。

    //thumb and large image are named the same, 
    //except large has "large-" in front
    $('#view').find('img').attr('src', 'large-' + thumb.attr('src'));

幸運を！

于 2012-09-18T18:45:08.480 に答える
1

Javascript ライブラリを少し試してみたい場合は、こちらをご覧ください。

http://www.infoq.com/articles/emberjs

これは、(質問の) ほとんどの要件を満たすサンプル アプリケーションです。カスタマイズできるサンプル作業コードがあります。

于 2012-09-18T18:43:48.527 に答える