Question

我正在构建一个基于以下标记的简单图像库：

<div id="image-list">
<ul>
<li id="image-1">
<img src="myimage1.jpg" width="500" height="500" alt="My Image" />
</li>
<li id="image-2">
<img src="myimage2.jpg" width="500" height="500" alt="My Image" />
</li>
<li id="image-3">
<img src="myimage3.jpg" width="500" height="500" alt="My Image" />
</li>
</ul>
</div>
<ul id="thumb-list">
<li id="thumb-1"><img src="myimage1-thumb.jpg" width="50" height="50" alt="My Image" /></li>
<li id="thumb-2"><img src="myimage2-thumb.jpg" width="50" height="50" alt="My Image" /></li>
<li id="thumb-3"><img src="myimage3-thumb.jpg" width="50" height="50" alt="My Image" /></li>
</ul>

我使用CSS设计了这个样式，因此一次只能看到一个较大的图像（使用overflow：隐藏了固定的容器高度）。

然后我使用jquery将UL绝对定位在容器中以显示每个图像，使用以下标记：

$('#thumb-list li img').click(function() {
    var image = $(this).parent().attr('id').substring(6);
    var position = $('#image-' + image).position();
    $("#image-list ul").css({'top' : '-' + position.top +'px'});
});

基本上我想淡出整个“＃image-list ul”，同时它的位置被改变，然后淡入它以显示新的图像。

有人可以建议最有效的方法吗？ - 非常感谢任何帮助！

Answer 1

从img标签中删除高度和宽度，css可以处理。

<强> CSS

＃图像列表{

      position:relative; 
      height:500px;
      width:500px;

}

＃image-list img {

      height:500px;
      width:500px;

}

＃image-list li {

      position:absolute;
      top:0;
      right:0;

}

<强> JS

$（'＃thumb-list li img'）。点击（function（）{

      var image = $(this).parent().attr('id').substring(6);
      $('#image-' + image).fadeIn("slow").siblings().fadeOut("slow");

}）;

你正在使用原型或jquery吗？

如果您使用jquery，而不是依赖.css()函数，请尝试.hide()函数，因为它与css({'display' : 'none'})完全相同。并且.fadeIn()将动画你的div的回归。在第一次加载时，它们都是可见的，所以不要用css隐藏它们告诉jquery用这个命令隐藏所有这些。

$（'＃thumb-list il'）。hide（）;

Answer 2

另一个解决方案可能是使用插件然后修改您的样式，以便在有人禁用Javascript时您的页面看起来不会破碎。

退房：http://medienfreunde.com/lab/innerfade/

这很容易使用，很难搞砸。祝好运！：）

jquery画廊淡入/淡出

2 个答案: