HTML/CSS, Javascript | 27 апреля 2011 |
Собственно говоря, для тех, кто хочет сразу увидеть о чем речь, предлагаю перейти сюда и посмотреть.
Что понадобится для начала?
Постройте списки, к примеру, вот так:
1 2 3 4 5 6 7 8 9 10 11 | <ul class="thumb"> <li><a href="#"><img src="/examples/images/thumb100.jpg" alt="" /></a></li> <li><a href="#"><img src="/examples/images/thumb200.jpg" alt="" /></a></li> <li><a href="#"><img src="/examples/images/thumb300.jpg" alt="" /></a></li> <li><a href="#"><img src="/examples/images/thumb400.jpg" alt="" /></a></li> <li><a href="#"><img src="/examples/images/thumb500.jpg" alt="" /></a></li> <li><a href="#"><img src="/examples/images/thumb600.jpg" alt="" /></a></li> <li><a href="#"><img src="/examples/images/thumb700.jpg" alt="" /></a></li> <li><a href="#"><img src="/examples/images/thumb800.jpg" alt="" /></a></li> <li><a href="#"><img src="/examples/images/thumb900.jpg" alt="" /></a></li> </ul> |
Оформите это с помощью CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | ul.thumb { float: left; list-style: none; margin: 0; padding: 10px; width: 360px; } ul.thumb li { margin: 0; padding: 5px; float: left; position: relative; /* Set the absolute positioning base coordinate */ width: 110px; height: 110px; } ul.thumb li img { width: 100px; height: 100px; /* Set the small thumbnail size */ -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */ border: 1px solid #ddd; padding: 5px; background: #f0f0f0; position: absolute; left: 0; top: 0; } ul.thumb li img.hover { background:none; border-style: none; /* Get rid of border on hover */ } |
Заставим это работать с jQuery
jQuery еще надо подключить, поэтому если не знаете, что да как, то можете ознакомиться с первой частью jQuery для начинающих.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | $("ul.thumb li").hover(function() { $(this).css({'z-index' : '10'}); /*Поставь картинку выше остальных*/ $(this).find('img').addClass("hover").stop() /* Добавить класс "hover"*/ .animate({ marginTop: '-110px', /* Добавь отступ сверху -110[x */ marginLeft: '-110px', top: '50%', left: '50%', width: '174px', /* Установить новую ширину*/ height: '174px', /* Установить новую высоту */ padding: '20px' }, 200); /* Это значение скорость анимации */ } , function() { /*После ухода курсора с картинки*/ $(this).css({'z-index' : '0'}); /* Вернуть значение z-index на место */ $(this).find('img').removeClass("hover").stop() /* Убрать класс ховер */ .animate({ marginTop: '0', /* Вернуть отступы на место */ marginLeft: '0', top: '0', left: '0', width: '100px', /* Установить ширину по умолчанию назад */ height: '100px', /* Установить ширину по умолчанию назад */ padding: '5px' }, 400); }); |
Собственно говоря, если вам интересно, что именно этот код делает так, то вкратце так:
К ячейке li класса thumb при наведении добавляется отступ z-index, потом там же в этой же ячейке ищется тег img и к нему добавляется класс .hover (смотрите часть с css).
Затем используется функция animate. Добавляется новая ширина и высота, новые отступы и т.д.
Данный скрипт и css, разумеется, можно редактировать под себя. Потому, если есть вопросы, можете задавать их в комментариях.
