5

画像のリストについては、正方形のサムネイルhttp://example.com/img1_thumb.jpg と元のサイズ (任意の比率)の URL がありhttp://example.com/img1.jpgます。グリッドにサムネイルを表示しています。ユーザーがグリッド内の画像の上にマウスを置いたときに、元のサムネイルを表示したいと思います。おそらくフローティング要素を使用して、ターゲットはユーザーが画像をより詳細に表示し、サムネイルでトリミングされた部分を表示できるようにすることです。

どうすればいいですか？HTML/css/Javascript初心者です

4

4 に答える 4

11

これを行う jQuery プラグインはたくさんあります。あなたは初心者なので、そこから始めることをお勧めします。これは、いくつかの異なるオプションを含む記事です。探しているものの例を次に示します。

于 2013-03-16T12:49:42.783 に答える
3

サムネイルなしで作業できます..

サムネイル用

<img src="http://example.com/img1.jpg" class="compress"/>

上記のホバーでこれを表示

$(".compress").hover(function(){
  $(".image").show();

});

フル画像

 <img src="http://example.com/img1.jpg" class="image"/>

CSS

 .compress{
  width:20%;
/*aspect ratio will be maintained*/

}

.image{
display:none;
position:absolute;


 }

完全ではありませんが、参考になると思います

于 2013-03-16T12:51:45.250 に答える
1

JQuery を使用します。

$(function() {
      $('#thumbnails img').click(function() {
            $('#thumbnails').hide();
            var src = $(this).attr('src').replace('.png', 'Large.png');
            $('#largeImage').attr('src', src).show();
      });
      $('#largeImage').hide().click(function() {
            $(this).hide();
            $('#thumbnails').show();
      });
});

<div id="thumbnails">
<img src="thumbnail1.png">...
</div>
<img id="largeImage" src="">
于 2013-03-16T12:50:25.713 に答える
1

基本的に、<div class="some_class"><img src="http://example.com/img1.jpg"></div>セットを作成してから、イベントを次のようdisplay:noneにバインドできます。thumb div

$(".thumb_class").hover(function(){
   $(".some_class").show()
},
function(){
   $(".some_class").hide()
}

もちろん、すべてをパーソナライズできますdiv。2 つ目は、マウスが親指の外にあるときに div にfunction移動できるようにします。hide私ができるだけ明確であることを願っています。

于 2013-03-16T12:51:37.653 に答える