Прокрутка изображений
Горизонтальная или вертикальная прокрутка миниатюр изображений. Использует jQuery и опционально easing плагин для эффектов.
HTML
Рассмотрим на примере первой Демки.
<div id="outer_container">
<div id="thumbScroller">
<div class="container">
<div class="content">
<div><a href="#"><img src="thumbs/thumb1.jpg" title="Дорога" alt="Дорога" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb2.jpg" title="Цветок" alt="Цветок" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb3.jpg" title="Сумерки" alt="Сумерки" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb4.jpg" title="Водопад" alt="Водопад" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb5.jpg" title="Каньон" alt="Каньон" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb6.jpg" title="Дорога" alt="Дорога" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb7.jpg" title="Лес" alt="Лес" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb8.jpg" title="Дом" alt="Дом" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb9.jpg" title="Рай" alt="Рай" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb10.jpg" title="Деревья" alt="Деревья" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="thumbs/thumb11.jpg" title="Листья" alt="Листья" class="thumb" /></a></div>
</div>
</div>
</div>
</div>CSS
Только для Демо 1:
#outer_container{margin:60px auto; width:600px; padding:0 10px; background:#000; border:1px solid #999;}
#thumbScroller{position:relative; margin:auto;}
#thumbScroller{width:600px;}
#thumbScroller, #thumbScroller .container, #thumbScroller .content{height:170px;}
#thumbScroller{overflow:hidden;}
#thumbScroller .container{position:relative; left:0;}
#thumbScroller .content{width:260px; float:left;}
#thumbScroller .content div{padding:10px 15px; height:100%; font-family:Verdana, Geneva, sans-serif; font-size:13px;}
#thumbScroller img{border:5px solid #fff;}jаvascript
Подключаем в шапке jQuery, в некоторых демках, дополнительно подключается плагин easing:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>В теле страницы, перед закрывающим тегом body вставляем скрипт, который будет взависимости от положения курсора обеспечивать прокрутку изображений:
$outer_container=$("#outer_container");
$thumbScroller=$("#thumbScroller");
$thumbScroller_container=$("#thumbScroller .container");
$thumbScroller_content=$("#thumbScroller .content");
$thumbScroller_thumb=$("#thumbScroller .thumb");
var sliderWidth=$thumbScroller.width();
var itemWidth=$thumbScroller_content.width();
$thumbScroller_content.each(function (i) {
totalContent=i*itemWidth;
$thumbScroller_container.css("width",totalContent+itemWidth);
});
$thumbScroller.mousemove(function(e){
var mouseCoords=(e.pageX - this.offsetLeft);
var mousePercentY=mouseCoords/sliderWidth;
var destY=-(((totalContent-(sliderWidth-itemWidth))-sliderWidth)*(mousePercentY));
var thePosA=mouseCoords-destY;
var thePosB=destY-mouseCoords;
if(mouseCoords==destY){
$thumbScroller_container.stop();
}
if(mouseCoords>destY){
$thumbScroller_container.css("left",-thePosA);
}
if(mouseCoords<destY){
$thumbScroller_container.css("left",thePosB);
}
});
var fadeSpeed=300;
$thumbScroller_thumb.each(function () {
var $this=$(this);
$this.fadeTo(fadeSpeed, 0.5);
});
$thumbScroller_thumb.hover(
function(){ //mouse over
var $this=$(this);
$this.stop().fadeTo(fadeSpeed, 1);
},
function(){ //mouse out
var $this=$(this);
$this.stop().fadeTo(fadeSpeed, 0.5);
}
);Для вертикального варианта прокрутки, скрипт будет несколько другим.
Ссылки
