Добавление деталей в слайд-шоу с картинками javascript - PullRequest
Новая
       7

Добавление деталей в слайд-шоу с картинками javascript

0 голосов
/ 26 сентября 2010

Наша команда в настоящее время работает над полной переработкой веб-сайта нашей школы, и один из наших проектов, находящихся в стадии реализации, - это легкое слайд-шоу с фотографиями, которое вы можете найти здесь .

Прямо сейчас, когда пользователь вводит пространство между двумя миниатюрами, они все исчезают. Каков наилучший способ организовать их так, чтобы они все «исчезали», когда пользователь входит в общую область больших пальцев? На ум приходит div, но я немного размышляю о том, как мы можем это реализовать.

Вся помощь очень ценится. Никто из нас не особенно силен, когда дело доходит до стиля с использованием javascript, так что это интересный опыт для нас.

Большое спасибо,

Юстиан Мейер

1 Ответ

1 голос
/ 26 сентября 2010

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.

...