Blog. Just Blog

Горизонтальный скроллер на JavaScript

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Горизонтальный скроллер на JavaScript
Горизонтальный скроллер на JavaScript

Захотел сделать горизонтальный скроллер для фотогалереи, естественно, без использования всяких сторонних скриптов. Условие: кроссбраузерность, валидная верстка и стандартные стили, поддержка колесика мыши. Начнем с верстки:
  1. <div class="scroller_container">
  2.   <div class="scroller_navigate"><img src="images/left.gif" alt=""></div>
  3.     <div class="scroller_window" id="scroller_window">
  4.       <div class="scroller_row" id="scroller_row">
  5.         <div id="scroller_rule">
  6.           <!-- список превьюшек в линейке скроллера -->
  7.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  8.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  9.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  10.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  11.         </div>   
  12.       </div>
  13.     </div>
  14.   <div class="scroller_navigate"><img src="images/right.gif" alt=""></div>
  15. </div>
Дополнительный элемент scroller_rule приходится использовать, чтобы получить полную ширину всей полосы скроллера с превьюшками. Элементы scroller_navigate содержат левую и правую стрелочки для прокрутки. Теперь надо создать таблицу стилей для оформления. "Окно" скроллера должно быть фиксированного размера и без полос прокрутки, а полоса скроллера будет перемещаться относительно этого окна, за счет этого будет достигаться эффект плавной прокрутки. Для большей красоты я взял фоновый рисунок, имитирующий фотопленку.
  1. <style type="text/css">
  2. .scroller_container div {
  3.     floatleft;
  4.     vertical-alignbaseline;
  5. }
  6.  
  7. .scroller_window {
  8.     width850px/* ширина окна скроллера */
  9.     overflowhidden;
  10. }
  11.  
  12. .scroller_row {
  13.     positionrelative;
  14.     white-spacenowrap;
  15.     width100%;
  16.     padding22px 0 22px 0/* отступы для перфорации пленки */
  17.     backgroundurl('images/foto.gif'repeat-x;
  18. }
  19.  
  20. .scroller_row img {
  21.     padding0px;
  22.     margin0px;
  23. }
  24.  
  25. .scroller_row a {
  26.     padding0px;
  27.     margin0px;
  28. }
  29.  
  30. .scroller_navigate {
  31.     padding2px 1px 0 1px;
  32.     cursorpointer;
  33. }
  34.  
  35. a img {
  36.     border0px;
  37. }
  38. </style>
Наш скроллер уже выглядит симпатично, теперь надо добавить анимацию. Здесь используются уже описанные ранее функции определения браузера и функции работы с колесиком мыши, их особенности и назначение описаны в соответствующих статьях. Небольшой комментарий по поводу корректировки размеров элемента scroller_row. Как выяснилось на практике, браузеры Opera и Chrome отображают фоновый рисунок только для видимой части полосы скроллера, поэтому приходится принудительно устанавливать стиль width полосе скроллера, чтобы фоновый рисунок растянулся на всю его ширину.
  1. // Глобальный объект скроллера
  2. var scroller={ };
  3.  
  4. // Инициализация скроллера
  5. function scroller_init() {
  6.   var el;
  7.   // Получить ширину внутренней части скроллера
  8.   el=document.getElementById('scroller_rule');
  9.   scroller.width=el.clientWidth;
  10.   // Получить ширину окна скроллера
  11.   el=document.getElementById('scroller_window');
  12.   scroller.window=el.clientWidth;
  13.  
  14.   // Установка обработчика колесика мыши
  15.   if (el.addEventListener) {
  16.     // Mozilla, Opera, Safari, Chrome
  17.     if (!(smart_chrome_check()=='666' || typeof(opera)=='object')) {
  18.       el.addEventListener('DOMMouseScroll'scroll_wheelfalse);
  19.     }
  20.     else {
  21.       el.addEventListener('mousewheel'scroll_wheelfalse);
  22.     }
  23.   }
  24.   else {
  25.     // IE
  26.     el.attachEvent('onmousewheel'scroll_wheel);
  27.   }
  28.  
  29.   scroller.position=0;
  30.   scroller.step=2;
  31.   scroller.timer=null;
  32.  
  33.   // fix размеров для background (Opera, Chrome)
  34.   el=document.getElementById('scroller_row');
  35.   el.style.width=scroller.width;
  36. }
  37.  
  38. // Проверка на Google Chrome
  39. function smart_chrome_check() {
  40.   // 66 - Internet Explorer && Chrome Trap
  41.   return(arguments.callee.toString().replace(/[^6]/g,''));
  42. }
  43.  
  44. // Обработчик колесика мыши
  45. function scroll_wheel(e) {
  46.   e window.event;
  47.   var wheelElem e.target e.target e.srcElement;
  48.   var wheelData e.detail e.detail * -e.wheelDelta 40;
  49.  
  50.   // В движке WebKit возвращается значение в 100 раз больше
  51.   if (Math.abs(wheelData)>100) { wheelData=Math.round(wheelData/100); }
  52.   if (wheelData<0) {
  53.     do_scroll('right',10*Math.abs(wheelData));
  54.   }
  55.   else {
  56.     do_scroll('left',10*Math.abs(wheelData));
  57.   }
  58.   // Подавление события колесика мыши, чтобы оно не передавалось дальше
  59.   if (window.event) {
  60.     e.cancelBubble true;
  61.     e.returnValue false;
  62.     e.cancel true;
  63.   }
  64.   if (e.stopPropagation && e.preventDefault) {
  65.     e.stopPropagation();
  66.     e.preventDefault();
  67.   }
  68.   return false;
  69. }
  70.  
  71. // Функция скроллера
  72. function do_scroll(dir,step) {
  73.   var el=document.getElementById('scroller_row');
  74.  
  75.   // Прокрутка влево      
  76.   if (dir=='left') {
  77.     scroller.position+=step;
  78.     // Если скроллер вышел за левую границу, то установить позицию в 0
  79.     if (scroller.position>0) {
  80.       scroller.position=0;
  81.     }    
  82.   }
  83.   // Прокрутка вправо
  84.   else {
  85.     scroller.position-=step;
  86.     // Если скроллер вышел за правую границу, то установить позицию в край
  87.     if (scroller.position<(scroller.window-scroller.width)) {
  88.       scroller.position=scroller.window-scroller.width;
  89.     }    
  90.   }
  91.   // Установить позицию полосы скроллера
  92.   el.style.left=scroller.position+'px';
  93. }
  94.  
  95. // Таймер скроллера
  96. function scroll_timer(dir) {
  97.   if (scroller.timer==null) {
  98.     scroller.timer=setInterval("do_scroll('"+dir+"', "+scroller.step+");",10);
  99.   }    
  100. }
  101.  
  102. // Остановка скроллера
  103. function scroll_stop() {
  104.   if (scroller.timer!=null) {
  105.     clearInterval(scroller.timer);
  106.     scroller.timer=null;
  107.   }    
  108. }
На боковые элементы навигации scroller_navigate устанавливаются обработчики движения мыши на функции scroll_timer и scroll_stop:
  1. <div class="scroller_navigate"><img src="images/left.gif" alt=""
  2. onmousemove="scroll_timer('left');" onmouseout="scroll_stop();"></div>
  3. ...
  4. <div class="scroller_navigate"><img src="images/right.gif" alt=""
  5. onmousemove="scroll_timer('right');" onmouseout="scroll_stop();"></div>
Также после загрузки страницы надо обязательно инициализировать наш скроллер:
  1. <script type="text/javascript">scroller_init();</script>
Теперь, если на них навести мышку, то скроллер будет прокручиваться в нужную сторону. При прокрутке колесиком мыши над "окном" скроллера, он также будет прокручиваться влево или вправо. Обработчиков действий при клике на фотографии здесь не предусмотрено, они будут разрабатываться в зависимости от конкретной задачи. Готовый пример горизонтального скроллера на JavaScript можете посмотреть у меня на сайте.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 9898 | Комментариев: 21

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
DiPrm (29.04.2017 в 22:13):
Pure JavaScript рулит! Пару лет назад прочитал статью и вдохновился к написанию собственного лайтбокса: http://busibox-pro.getforge.io/
Eblinkoff (09.09.2015 в 15:04):
Спасибо, мне оказалось полезно. Да, целиком не перенесёшь, ну, да и ладно. Это и не нужно, подпилил под себя, сделал резиновым и ок. Впереди написание лайтбокса, большое спасибо!
SBM (06.01.2015 в 22:51):
Не так очевидно, тем, кто недавно взялся за JavaScript)
Если не сложно, можно дать пример
ManHunter (06.01.2015 в 22:26):
Переписать на вертикальную прокрутку. Очевидно же.
SBM (06.01.2015 в 22:18):
Очень симпатичный скрипт, а как сделать так же, только вертикально?
ManHunter (01.02.2013 в 11:56):
Обновил скроллер на сервере, теперь там есть плавная прокрутка при скролле колесиком.
незнакомка (08.07.2012 в 19:58):
Случайно зашла, отличные статьи
ManHunter (17.11.2011 в 10:59):
Вообще-то еще не так давно для фотографий применялась фотопленка, и выглядела она примерно так же, как скроллер :)
Станислас (17.11.2011 в 10:57):
Симпатичная вещч. Правда внешний вид больше подходит для сайтов с кинотематикой (одна перфорация чего стоит), но задумка очень удобная, стянул для своего сайта.
Большое спасибо.
ManHunter (26.10.2011 в 13:01):
Здесь же работает. Вывод? Дело не в бобине.
Джеймхуй Бонд (26.10.2011 в 12:56):
Хотели использовать на своём сайте, но не судьба.
Скроллер распирает шаблон страницы до размеров общей длины ленты.

и бэкграунд (foto.gif) отображается только на изначально видимой части скроллера, если двигать ленту то изначально скрытая часть отображается без фона.
ManHunter (14.10.2011 в 23:09):
Когда-нибудь будет. Когда конкретно - не знаю.
Елена (14.10.2011 в 22:47):
А лайтбокс ожидается?
Спасибо за статью.
kruvas (12.09.2011 в 03:19):
интересно выглядит... только есть небольшой недочет - при скролле роликом мышки картинки двигаются рывком и ровно на кадрик - ощущение что перфорация не движется. решил добавить функцию для анимации.
получилась всего одна дополнительная функция animate, и в ф-ии scroll_wheel надо заменить вызов do_scroll на animate с такими же аргументами
вот что получилось в итоге
http://78.46.63.240/animated.html
Владимир (08.09.2011 в 00:41):
Спасибо нужная статья прочитал с удовольствием .
ManHunter (25.08.2011 в 20:29):
Ну значит себе в ближайшие планы поставлю написание лайтбокса. А там видно будет. Отпуск на носу, настроение нихера не рабочее.
AlexKlu (25.08.2011 в 20:24):
Согласен с комрадом Isaev-ым... Подскажи, дружище, как можно при клике разворот фотки получить. Уж больно глянулся этот скроллер...
ManHunter (17.08.2011 в 23:11):
Если я что-то могу сделать самостоятельно, то я это сделаю самостоятельно, и сделаю это на чистом JavaScript без всяких посторонних фреймворков. jquery - это НЕ программирование.
Вадим (17.08.2011 в 22:55):
Личное мое мнение - на данный момент лучше всего все яваскрипты делать под jquery. В любом случае на современном сайте как минимум данная библиотека должна быть подключена, а уж на ее основе и делать все необходимые яваскрипты.
ManHunter, хороший скрипт, только еще бы зациклить его, т.е. бесконечную прокрутку сделать.
ManHunter (17.08.2011 в 11:07):
Это обязательно будет когда я нарисую свой лайтбокс для картинок. Но это пока только в задумках, за реализацию еще не брался.
Isaev (17.08.2011 в 04:43):
Как обычно, профподход... А при клике бы плавное масштабирование на весь размер

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2017
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.23 сек. / MySQL: 2 (0.0047 сек.) / Память: 4.5 Mb
Наверх