Горизонтальный Scrolling с помощью jQuery
827материалов
228тем на форуме
3004комментария
6159пользователей

Горизонтальный Scrolling с помощью jQuery


Описание:

Интересный вариант создания шаблона страницы с горизонтальным скроллом (scroll). Поскольку горизонтальная прокрутка сегодня весьма популярна, данный плагин покажется актуальным многим начинающим разработчикам. Для скроллинга можно использовать что угодно, хоть картинку, хоть шаблон, хоть фреймы. В демонстрации я использую 5 сайтов через iframe.

Особенности:

  • Поддержка сенсорных устройств, таких как iPhone, iPad и Android смартфонов.
  • Бесконечный цикл, по желанию.
  • Различные методы прокрутки: touch (касанием), хотспот (кнопками в виде стрелок), колесиком мыши.
  • Прокрутка контента любого типа, а не только изображений.
Установка:

Скачиваем архив с нашего сайта и загружаем папку scorlling в свой файловый менеджер.

Шаблон горизонтального скроллинга:
Код
<!DOCTYPE html>
<html>
<head>
<title>Горизонтальный Scrolling с помощью jQuery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="/ucoz/1/scorlling/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/scorlling/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/scorlling/touchSwipe.js"></script>
<script type="text/javascript" src="/scorlling/horizonScroll.js"></script>
</head>
<body>

<header data-role="header" id="header"></header>
<div class="horizon-prev"><img src="/scorlling/l-arrow.png"></div>
<div class="horizon-next"><img src="/scorlling/r-arrow.png"></div>

<section data-role="section" id="section-section1">
<iframe src="http://webmaster-ucoz.ru/" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
</section>

<section data-role="section" id="section-section2">
<iframe src="http://yraaa.ru/" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
</section>

<section data-role="section" id="section-section3">
<iframe src="http://ucoz.ru/" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
</section>

<section data-role="section" id="section-section4">
<iframe src="http://internetempire.ru/" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
</section>

<section data-role="section" id="section-section5">
<iframe src="http://school-ucoz.ru/" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
</section>

<footer data-role="footer" id="footer"></footer>
<script type="text/javascript">
$('section').horizon();
//$('section').horizon({swipe: false});
</script>
</body>
</html>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Шаблон опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о шаблоне:
Дата добавления материала: 06.02.2016 в 15:00
Материал просмотрен: 3641 раз
Категория материала: Шаблоны для uCoz
К материалу оставлено: 12 комментариев

Пожаловаться
Сказать спасибо

12 комментариев


avatar
Классная штука like
71_nik
Николай @71_nik 04.10.2015 22:592
+7
Красиво like
ТимурКурбанов
Спасибо! Реально круто like like like
Romchik
Всегда пожалуйста)
fecc
Костик @fecc 05.10.2015 00:574
+3
+1 Господи! Да ты просто БОГ! Спасибо за твою работу!
Romchik
Старался)
pro100kasper
pro100kasper @pro100kasper 05.10.2015 03:537
-1
Если бы не js, сам бы поставил не что подобное к себе, но уж больно много получается кода на страницы и нагружает не плохо. Такое больше всего подойдет для маленького сайта продающего с узкой тематикой на 5-6 страниц.
Romchik
А в чем проблемы? в скрипте используется только один "тяжелый" файл, это touchSwipe.js, jquery можно заменить на системный, css практически пустой, horizonScroll.js, тоже не нагружен. cool
pro100kasper
pro100kasper @pro100kasper 05.10.2015 16:4010
+2
В том, то и дело друг мой, что своих уже достаточно, да ещё и возможно пополнение в ближайшее время будет с расширением функционала ) Если бы был полный php было бы конечно проще с этим всем, но и на том хорошо )
1 2 »
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта