Произвольная прокрутка страницы на jQuery. Скрипты. Блог. Портал SzenProgs
 

Произвольная прокрутка страницы на jQuery

Скрипты

Рисунок Произвольная прокрутка страницы на jQuery
Произвольная прокрутка страницы на jQuery Произвольная прокрутка страницы на jQuery
оценка: 4.7 из 5
оценок: 14, отзывов: 7

На больших страницах, которые уходят далеко за пределы окна браузера по высоте и ширине, будет удобен данный скрипт произвольной прокрутки страницы. При использовании скрипта на странице появляются четыре невидимые области сверху, справа, снизу и слева. При наведении курсора мыши на эти области страница начинает плавно прокручиваться в соответствующую сторону. При щелчке на области скорость прокрутки увеличивается. Если курсор мыши убрать с области, то прокрутка страницы останавливается.

Работоспособность скрипта была проверена в следующих браузерах: Opera 12, Firefox 3.6, GoogleChrome 14, Internet Explorer 6-8. Пример скрипта произвольной прокрутки страницы можете проверить здесь. Для этого подведите курсор мыши в самый низ или верх этой страницы. Если эта страница полностью уместилась в окне вашего браузера, то уменьшите размер окна до появления полос прокрутки.

Давайте займемся установкой скрипта произвольной прокрутки страницы. Так как в основе скрипта лежит фреймворк jQuery, его нужно подключить. Вписываем следующий код внутри тега HEAD:

Code
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Учтите, если jQuery у вас уже подключен, то верхнее действие нужно пропустить.

Весь код скрипта я не стану здесь публиковать: он получился довольно объемным. Я вывел его в отдельный файл. Желающие могут сами открыть файл скрипта и посмотреть исходники. Так вот, этот файл также нужно подключить в теле HEAD страницы после объявления jQuery. Владельцам uCoz-сайтов нужно вписать этот код в тело BODY:

Code
<script type="text/javascript" src="http://szenprogs.ru/scripts/roller.js"></script>

Теперь запустим скрипт в работу. Для этого используется следующий код, который нужно вписать в тело HEAD (для uCoz в тело BODY):

Code
<script type="text/javascript">
  $(function(){
    $roller.init({
      maxSpeed: 400,
      minSpeed: 4000,
      boxColor: '#00ff00',
      boxWidth: 100,
      OpacityEnter: '0.6',
      OpacityLeave: '0.3',
      horizontal: true,
      vertical: true
    });
  });
</script>

Подгонка скрипта "под себя" заключается в подборе оптимальных параметров вызова скрипта произвольной прокрутки страницы.

Описание параметров. Параметры можно прпускать:

  • maxSpeed - максимальная скорость прокрутки. Быстрая прокрутка ктивируется при щелчке мыши по области. Измеряется в миллисекундах.
  • minSpeed - минимальная скорость прокрутки. Медленная прокрутка активируется при наведении курсора мыши на область. Измеряется в миллисекундах.
  • boxColor - цвет области наведения.
  • boxWidth - размер области в пикселях.
  • OpacityEnter - прозрачность области при наыедении на неё курсора. Может принимать значение от '0.0' - полная прозрачность, до '1.0' - полная непрозрачность.
  • OpacityLeave - прозрачность области при уходе с неё курсора. Может принимать значение от '0.0' - полная прозрачность, до '1.0' - полная непрозрачность.
  • horizontal - нужно ли прокручивать по горизонтали. Может принимать значение true или false.
  • vertical - нужно ли прокручивать по горизонтали. Может принимать значение true или false.

После подгонки настроек скрипт произвольной прокрутки страницы должен заработать сразу. Если что-то не заработало, или имеются предложения, или нашли ошибку - пишите, отвечу.

На этом все. Подписывайтесь! Ставьте звездочки! Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Произвольная прокрутка страницы на jQuery
Скрипты
Скрипты, инструкции, справочники


Для работы понадобится jQuery.

rss
Категория:Скрипты
Просмотрено:6085
Рейтинг:4.7/14
Дата добавления:2012-09-01 13:34, Суббота
Добавил:Szen
Теги:scroll, прокрутка, скролл

Мини-форум

№ 02012-09-01 13:34
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Произвольная прокрутка страницы на jQuery".
Гость
№ 1
2012-09-02 21:15 Спам
Szen
Аватар участника Szen
e-zheg, браузер у вас какой? Я ваш код в Опере, Хроме, файрфоксе и Эксплорере проверил. везде работает.
Szen
№ 2
2012-09-03 03:57 Спам
e-zheg
Аватар участника e-zheg
chrome 21.* на вашей странице все работает, по коду - нет (на двух машинах с одинаковым хромом проверил). в эксплорере работает.
Сергей
№ 3
2012-09-10 12:18 Спам
Szen
Аватар участника Szen
e-zheg, может в хроме есть ограничения на запуск локальных скриптов. У меня IE постоянно ругается, когда я локально скрипты запускаю.
Szen
№ 4
2012-09-11 23:38 Спам
iduha
Аватар участника iduha
Доброго времени суток! Уважаемый e-zheg, у меня скрипт не работает, я наверное что-то не так делаю... Подскажите как можно написать подобное сайту: ТРК Місто Полтава. Меня интересует движущаяся по клику панорама заднего плана.
iduha
№ 5
2014-09-21 19:08 Спам
warkat
Аватар участника warkat
Привет!
ОГРОМНОЕ спасибо, Вам за предоставленный слайдер!
Все пашет супер... вопрос один но реально необходимый - как сделать чтобы слайдер пахал БЕЗ этого доктайпа?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Эта строка убивает мне нужную функцию.. пожалуйста =) Знаю что она необязательна.. не пойму почему без нее не работает?

И привет с Юкоза.. поставил вам кредит - вот тема:

http://forum.ucoz.ru/forum/38-69202-1

Kai
http://www.dogica.com

Спасибо !!!
Кай
№ 6
2015-11-21 16:07 Спам
Heeretic888
Аватар участника Heeretic888
Доброго дня.
А у меня не до конца работает. Точнее, в разметке появляются 4 дива и один скрытый, как положено. Но они не имеют размеров и, соответственно, не отображаются. Есть тонкость, сайт построен с использованием фреймворка materializecss. Может, что-то конфликтует. Но при его отключении результат тот же. Что это может быть?
Pugovkin Oleg
№ 7
2015-11-21 16:44
Szen
Аватар участника Szen
Heeretic888, ссылочку скинь на страницу со скриптом
Szen
Учавствовать в обсуждении "Произвольная прокрутка страницы на jQuery" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Посетители
Друзья портала
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Заработок
Опрос
Во сколько оцените портал
Всего ответов: 1884
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 4
Гостей: 4
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz