Произвольная прокрутка страницы на jQuery
Скрипты
Произвольная прокрутка страницы на jQueryНа больших страницах, которые уходят далеко за пределы окна браузера по высоте и ширине, будет удобен данный скрипт произвольной прокрутки страницы. При использовании скрипта на странице появляются четыре невидимые области сверху, справа, снизу и слева. При наведении курсора мыши на эти области страница начинает плавно прокручиваться в соответствующую сторону. При щелчке на области скорость прокрутки увеличивается. Если курсор мыши убрать с области, то прокрутка страницы останавливается.
Работоспособность скрипта была проверена в следующих браузерах: Opera 12, Firefox 3.6, GoogleChrome 14, Internet Explorer 6-8. Пример скрипта произвольной прокрутки страницы можете проверить здесь. Для этого подведите курсор мыши в самый низ или верх этой страницы. Если эта страница полностью уместилась в окне вашего браузера, то уменьшите размер окна до появления полос прокрутки.
Давайте займемся установкой скрипта произвольной прокрутки страницы. Так как в основе скрипта лежит фреймворк jQuery, его нужно подключить. Вписываем следующий код внутри тега HEAD:
Учтите, если jQuery у вас уже подключен, то верхнее действие нужно пропустить.
Весь код скрипта я не стану здесь публиковать: он получился довольно объемным. Я вывел его в отдельный файл. Желающие могут сами открыть файл скрипта и посмотреть исходники. Так вот, этот файл также нужно подключить в теле HEAD страницы после объявления jQuery. Владельцам uCoz-сайтов нужно вписать этот код в тело BODY:
Теперь запустим скрипт в работу. Для этого используется следующий код, который нужно вписать в тело HEAD (для uCoz в тело BODY):
$(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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Произвольная прокрутка страницы на jQuery
Скрипты
Скрипты, инструкции, справочники
Для работы понадобится jQuery.
| Категория: | Скрипты |
| Просмотрено: | 8528 |
| Рейтинг: | 4.7/15 |
| Дата добавления: | 2012-09-01 13:34, Суббота |
| Добавил: | Szen |
| Теги: | scroll, прокрутка, скролл |
Рекомендуем
Дополнительно к Произвольная прокрутка страницы на jQuery
Мини-форум
| № 0 | 2012-09-01 13:34 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Произвольная прокрутка страницы на jQuery". |
| Гость |
| № 1 | 2012-09-02 21:15 |
Szen | e-zheg, браузер у вас какой? Я ваш код в Опере, Хроме, файрфоксе и Эксплорере проверил. везде работает. |
| Szen |
| № 2 | 2012-09-03 03:57 |
| e-zheg | chrome 21.* на вашей странице все работает, по коду - нет (на двух машинах с одинаковым хромом проверил). в эксплорере работает. |
| Сергей |
| № 3 | 2012-09-10 12:18 |
| Szen | e-zheg, может в хроме есть ограничения на запуск локальных скриптов. У меня IE постоянно ругается, когда я локально скрипты запускаю. |
| Szen |
| № 4 | 2012-09-11 23:38 |
| iduha | Доброго времени суток! Уважаемый e-zheg, у меня скрипт не работает, я наверное что-то не так делаю... Подскажите как можно написать подобное сайту: ТРК Місто Полтава. Меня интересует движущаяся по клику панорама заднего плана. |
| iduha |
| № 5 | 2014-09-21 19:08 |
| 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 | Доброго дня. А у меня не до конца работает. Точнее, в разметке появляются 4 дива и один скрытый, как положено. Но они не имеют размеров и, соответственно, не отображаются. Есть тонкость, сайт построен с использованием фреймворка materializecss. Может, что-то конфликтует. Но при его отключении результат тот же. Что это может быть? |
| Pugovkin Oleg |
