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');

});

我知道这个问题已经很老了。但这是我的第一个答案之一，所以请考虑复选标记。

于 2013-02-14T12:55:07.197 回答