Скользящий блок на jQuery
В этом уроке мы создадим блок, скользящий по странице - если пользователь будет прокручивать страницу , то такой блок будет всегда скользить за ним, или не всегда... обо всем об этом в примерах.
Исходники здесь, все примеры ниже.
Как обычно подключаем jquery (версия 1.2.6), затем плагин jQuery UI Core (версия 1.5.2) и скрипт scrollFollow
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="jquery.scrollFollow.js"></script>
Скрипт scrollFollow позволяет выполнить скользящий блок с различными эффектами, рассмотрим каждый из них:
(во всех примерах высота страницы равна 2000 px для наглядности примера).
1. Самый простой способ без применения каких-либо дополнительных действий - это между тегами head вызвать scrollFollow и привязать к нужному нам блоку ( блок с id=example):
<script type="text/javascript">
$( "#example" ).scrollFollow();
</script>
Посмотреть действие можно на примере 1
2. Вызываем scrollFollow с параметрами (Для работы этого примера, нам потребуется подключить дополнительный плагин jquery.cookie. Делаем это как обычно между тегами head):
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
$( document ).ready( function () {
$("#example" ).scrollFollow( {
speed: 500,
offset: 60,
killSwitch: "exampleLink",
onText: "Перестань за мной ходить!!!",
offText: "Скользи за мной!"
} );
} );
</script>
Здесь:
speed - Скорость скольжение, мс
offset - Кол-во пикселей, на которое будет отступать блок от верхней части браузера
killSwitch - указываем id объекта, который будет разрешать/запрещать скроллинг;
onText - Этот текст будет написан, когда скролл включен;
offText - Этот текст будет написан, когда скролл выключен;
Посмотреть действие можно на примере 2
3. Скольжение нашего блока внутри контейнера. Здесь все решается просто - добавляем еще один DIV c заданием ему фиксированной высоты. Поместим наш id="example" в новый контейнер #container. Для #container в css пропишем следующие свойства:
<style type="text/css">
#container {
width: 250px;
height: 1200px;
margin: 10px;
padding: 10px;
background: #ccc;
}
</style>
Здесь роль играет значение высоты, остальное красоты ради
Посмотреть действие можно на примере 2
4. Задержка появления нашего блока после того, как пользователь перестал прокручивать страницу:
<script type="text/javascript">
$( document ).ready( function () {
$( "#example" ).scrollFollow( {
delay: 1000 // Выставляем задержку на 1 секунду
} );
} );
</script>
Здесь delay - выставляет задержку на 1 секунду
Посмотреть действие можно на примере 3
5. Скольжение блока внутри контейнера, определенного scrollFollow. Пример аналогичен примеру 3 с той разницей, что здесь мы зададим, внутри какого контейнера должен скользить блок:
<script type="text/javascript">
$( document ).ready( function () {
$( "#example4" ).scrollFollow( {
container: "outer"
} );
} );
</script>
Здесь в параметре container: выбираем контейнер, внутри которого будет скользить наш блок Создадим два контейнера div id = "outer" и div id = "inner" . Обратите внимание, что мы будем работать с объектом #example4, которому зададим абсолютное позиционирование top:10px, иначе он окажется внутри контейнера inner, а расстояние, по которому он будет скользить, будет высотой outer. Таким образом, он при скроллинге выйдет за пределы outer
<style type="text/css">
#outer {
position: relative;
width: 250px;
height: 980px;
padding: 10px;
background: #999;
}
#inner {
height: 500px;
margin: 180px 0 0 0;
padding: 10px;
background: #ccc;}
#example4 {
position:absolute;
width: 180px;
top: 10px;
margin: 0;
padding: 20px;
background: #eee;
border: 2px solid #42CBDC;
}
.mybox {height:100px; width:100px; background:#F00;}
</style>
Таким образом, в контейнере #outer может быть много Div блоков, текстов и всего остального, но #example4 будет проскальзывать поверх всех. Для наглядности я кинул один DIV с классом .mybox в контейнер outer и такой же в inner, #example4 благополучно проскользил поверх них.
Посмотреть действие можно на примере 4
Обратите внимание на то, что в любом примере у скользящего блока (#example, #example4) параметр position в css обязателен и должен быть absolute или relative.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://kitchen.net-perspective.com/
Перевел: Евгений Попов
Урок создан: 19 Апреля 2009
Просмотров: 63441
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.