Question

我们的团队目前正在全力重新设计我们学校的网站，我们正在进行的项目之一是一个轻量级的照片幻灯片，您可以找到here。

现在，当用户输入两个缩略图之间的空格时，它们都会消失。组织它们的最佳方法是什么，以便当用户进入拇指的一般区域时它们都“解开”？想到了一个div，但我对如何实现它有点模糊。

非常感谢所有帮助。在使用javascript进行样式设计时，我们都不是特别强大，所以这对我们来说是一次有趣的学习体验。

非常感谢，

Justian Meyer

Answer 1

html

<div id="wrapper">
  <img class="big" ..../>
  <div id="hover_area" onmouseover="startUnFade();">
    <img class="thumb" ..../>
    <img class="thumb" ..../>
    <img class="thumb" ..../>
  </div>
</div>

您可以在页面上设置包装div的位置。

CSS

#wrapper {
  height: 420px;
  width: 660px;
  position: relative;
}
#hover_area {
  position: absolute; /* this will position your thumbnails relative to wrapper */
  right: 0;
  bottom: 0;
  padding: 5px; /* space at right and at the bottom */
}
/* and put you images one each other*/
#hover_area img.thumb {
  float: left;
  padding: 5px; /* 10px space between images */
  width: 50px;
  height: 50px;
}

并且您不应该使用内联样式创建class属性并将样式放在css文件中。

添加详细信息到javascript图片幻灯片

1 个答案: