2

これは、リストの左上にアニメーション表示され、大きな画像が表示されるサムネイル用です。

これは構造であり、大きなリストです。これらの項目を配置する最良の方法を知りたいだけですか、それともリスト項目ではなく div として行うべきですか?

<li  class="thumb">
    <img src="img/work/thumbemphasis.jpg">
        <div class="thumb-caption">
            <h4>Creative</h4>
        </div>
</li>
......
<li class="thumb">
<img src="img/work/thumbscale.jpg">
    <div class="thumb-caption">
        <h4>Creative</h4>
    </div>
</li>

cssを使用してサイズ変更をアニメーション化するアイテムにこれを適用するのは間違っています。今すぐリストの一番上に移動する必要があります...しかし、どうすればよいかわかりません。

 $(".thumb").click(function(){
         this.style.width="850px";
         this.style.height="600px";
   });

ありがとう

4

1 に答える 1

0

私の理解が正しければ、最初の画像を大きくして、他の画像をサムネイルにするのが好きだと思います。サムネイルをクリックすると、最初の画像の位置になります。前の大きな画像がリストに戻ります。

私のおすすめ：

最初のリスト項目を、クリックされたリスト項目のプレースホルダーとし、アクティブなリスト項目をプレースホルダー上に絶対配置で移動するクラスを追加します。他のすべてのリスト アイテムはフローティングできます。CSS:

.thumb {
 float: left;
 }
.thumb.active {
position: absolute; 
top:0; 
left:0;
width:600px;
height: 850px;}

.placeholder {
width:600px;
height: 850px;}

html

<ul>
<li class='placeholder'></il>
<li class='thumb'>...</li>
...
<li class='thumb active'>...</li>
...
</ul>

JavaScript:

$(".thumb").click(function(){
    $('.active').removeClass('active');
     this.addClass('active');

});

この質問はかなり古いことを知っています。しかし、これは私の最初の回答の 1 つなので、チェック マークを検討してください。

于 2013-02-14T12:55:07.197 に答える