+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Smooth Div Scroll: горизонтальная прокрутка блоков, изображений с поддержкой TouchScreen

Smooth Div Scroll - это плагин для горизонтальной прокрутки контента.
Особенности:
- плагин позволяет прокручивать любой контент в блоках: изображения, видео, текст;
- поддержка сенсорных устройств;
- зацикливание прокрути (вкл/выкл)
- автозапуск прокрутки при загрузке страницы (вкл/выкл)

Что нам понадобится? Подключаем библиотеки
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="jss/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<script src="jss/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="jss/jquery.kinetic.js" type="text/javascript"></script>
<script src="jss/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
Для правильного отображения элементов, помещенных в контейнер для прокрутки, нам понадобится следующий файл
<link href="css/smoothDivScroll.css" rel="stylesheet" type="text/css" />
Также нам нужно несколько картинок: arrow_left.gif, arrow_right.gif, big_transparent.gif.

В нашем пример в каждом блоке у нас две картинки:
Первая картинка - это рамка кадра фотопленки. Вторая картинка - это сам снимок.
<!-- в контейнере makeMeScrollable будет контент для прокрутки -->
<div id="makeMeScrollable">
<div class='part'>
<img src='shot.png' class='shot'>
<img src='1.jpg' class='photo'>
</div>
<div class='part'>
<img src='shot.png' class='shot'>
<img src='2.jpg' class='photo'>
</div>
<div class='part'>
<img src='shot.png' class='shot'>
<img src='3.jpg' class='photo'>
</div>
<!-- и так далее до 13 -->
</div>
#makeMeScrollable{
/* ширина контейнера, можно задать в процентах */
width:700px;
margin:0 auto;
display:block;
position:relative;}

/* стиль блоков, вложенных в контейнер makeMeScrollable*/
.part{
display:inline-block;
width:267px; height:200px;}

/* рамка-кадр */
.shot{
position:absolute;
z-index:3;}
/* картинка */
.photo{
mix-blend-mode: difference;
position:absolute;
z-index:2;}
И на последок немного настроек
<script type="text/javascript">
$(document).ready(function (){
$("div#makeMeScrollable").smoothDivScroll({
//прокрутка с помощью колеса мыши
//по всем направлениям (не все мыши имеют такую возможность)
mousewheelScrolling: "allDirections",
manualContinuousScrolling: false, //Бесконечный цикл
touchScrolling:true,
/*
"" - пустая строка сделает стрелки для прокрутки невидимыми всегда.
hover - сделает стрелки для прокрутки видимым, только при наведении мыши на скроллер.
onStart - делает стрелки для прокрутки видимыми n секунд
always - стрелки для прокрутки видны все время.
*/
visibleHotSpotBackgrounds:"always",
/*
если предыдущее значение onStart
через столько миллисекунд стрелки исчезнут
*/
hotSpotsVisibleTime: 2000,
// автозапуск при загрузке страницы
// уберите эту строку, если Вам это не нужно
autoScrollingMode:onStart,
});
});
</script>
Подронее о свойствах http://smoothdivscroll.com/

Демонстрация

Скачать 296.9Kb


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 7213