Blog. Just Blog

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

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

Захотел сделать горизонтальный скроллер для фотогалереи, естественно, без использования всяких сторонних скриптов. Условие: кроссбраузерность, валидная верстка и стандартные стили, поддержка колесика мыши. Начнем с верстки:
Code (HTML) : Убрать нумерацию
  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 содержат левую и правую стрелочки для прокрутки. Теперь надо создать таблицу стилей для оформления. "Окно" скроллера должно быть фиксированного размера и без полос прокрутки, а полоса скроллера будет перемещаться относительно этого окна, за счет этого будет достигаться эффект плавной прокрутки. Для большей красоты я взял фоновый рисунок, имитирующий фотопленку.
Code: Убрать нумерацию
  1. <style type="text/css">
  2. .scroller_container div {
  3.     float: left;
  4.     vertical-align: baseline;
  5. }
  6.  
  7. .scroller_window {
  8.     width: 850px; /* ширина окна скроллера */
  9.     overflow: hidden;
  10. }
  11.  
  12. .scroller_row {
  13.     position: relative;
  14.     white-space: nowrap;
  15.     width: 100%;
  16.     padding: 22px 0 22px 0; /* отступы для перфорации пленки */
  17.     background: url('images/foto.gif') repeat-x;
  18. }
  19.  
  20. .scroller_row img {
  21.     padding: 0px;
  22.     margin: 0px;
  23. }
  24.  
  25. .scroller_row a {
  26.     padding: 0px;
  27.     margin: 0px;
  28. }
  29.  
  30. .scroller_navigate {
  31.     padding: 2px 1px 0 1px;
  32.     cursor: pointer;
  33. }
  34.  
  35. a img {
  36.     border: 0px;
  37. }
  38. </style>
Наш скроллер уже выглядит симпатично, теперь надо добавить анимацию. Здесь используются уже описанные ранее функции определения браузера и функции работы с колесиком мыши, их особенности и назначение описаны в соответствующих статьях. Небольшой комментарий по поводу корректировки размеров элемента scroller_row. Как выяснилось на практике, браузеры Opera и Chrome отображают фоновый рисунок только для видимой части полосы скроллера, поэтому приходится принудительно устанавливать стиль width полосе скроллера, чтобы фоновый рисунок растянулся на всю его ширину.
Code (JavaScript) : Убрать нумерацию
  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_wheel, false);
  19.     }
  20.     else {
  21.       el.addEventListener('mousewheel', scroll_wheel, false);
  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 = e ? e : window.event;
  47.   var wheelElem = e.target ? e.target : e.srcElement;
  48.   var wheelData = e.detail ? e.detail * -1 : 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:
Code (HTML) : Убрать нумерацию
  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>
Также после загрузки страницы надо обязательно инициализировать наш скроллер:
Code (JavaScript) : Убрать нумерацию
  1. <script type="text/javascript">scroller_init();</script>
Теперь, если на них навести мышку, то скроллер будет прокручиваться в нужную сторону. При прокрутке колесиком мыши над "окном" скроллера, он также будет прокручиваться влево или вправо. Обработчиков действий при клике на фотографии здесь не предусмотрено, они будут разрабатываться в зависимости от конкретной задачи. Готовый пример горизонтального скроллера на JavaScript можете посмотреть у меня на сайте.

Поделиться ссылкой ВКонтакте
Просмотров: 13262 | Комментариев: 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 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (30), AJAX (5), Assembler (362), COM (41), CSS (41), Exif (15), FASM (8), Firefox (7), HDD (17), Hello Teddy (9), HTML (51), iconBIT (4), JavaScript (73), MySQL (13), Nikon (19), PDF (10), PHP (122), Samsung (6), SEO (12), Sublime Text (9), TintonLife (4), UGREEN (4), Windows 7 (66), аккумуляторы (23), аксессуары (12), анализаторы файлов (8), архиваторы (6), аттракционы (7), безопасность (55), браузеры (16), бытовая техника (19), варенье (19), ВВЦ (9), ВДНХ (14), видео (20), Воробьевы горы (9), вторые блюда (125), выпечка (28), выставки (119), генератор ПСЧ (10), графика (120), десерты (31), Египет (8), заготовки на зиму (47), закуска (22), закуска к пиву (24), зарядные устройства (24), защита (15), зоопарки (10), игры (36), иконки (22), интерфейс (26), исследование защиты (316), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (27), ледяные скульптуры (6), мои программы (69), мониторы (6), музеи (78), мультимедиа (76), мясо (62), напитки (14), ноутбуки (8), обфускация (7), окна (69), оформление сайта (49), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (130), полезные функции (42), прохождения (4), процессы (25), птица (20), путешествия (25), распаковка (22), реверсинг (52), рыба (35), салаты (19), сброс триала (4), сеть (36), система (178), Сокольники (8), соусы (14), супы (14), телефоны (10), Тунис (6), умный дом (13), файлы справки (6), фаст-фуд (18), фестиваль цветов (5), флешки (5), фото (23), хеши (16), числа (8), юмор (12), яйца (19), Яндекс (11)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 35,172 раза
<< 2024 - СЕНТЯБРЬ >>
Пн Вт Ср Чт Пт Сб Вс
            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 27 28 29
30            
День федерального государственного санитарно-эпидемиологического надзора
День работников леса
День свободных денег
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 360
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.09 сек. / MySQL: 2 (0.0063 сек.) / Память: 4.5 Mb
Наверх