Информация к новости
  • Просмотров: 888
  • Автор: sulicompany
  • Дата: 22-06-2012, 00:36
 (голосов: 0)
22-06-2012, 00:36

Скользящий блок на jQuery

Категория: Программирование » 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>

Посмотреть действие можно на 

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 - Этот текст будет написан, когда скролл выключен;
Посмотреть действие можно на 

3. Скольжение нашего блока внутри контейнера. Здесь все решается просто - добавляем еще один DIV c заданием ему фиксированной высоты. Поместим наш id="example" в новый контейнер #container. Для #container в css пропишем следующие свойства:

<style type="text/css"> #container { width: 250px; height: 1200px; margin: 10px; padding: 10px; background: #ccc; } </style>

Здесь роль играет значение высоты, остальное красоты ради Посмотреть действие можно на 

4. Задержка появления нашего блока после того, как пользователь перестал прокручивать страницу:

<script type="text/javascript"> $( document ).ready( function () { $( "#example" ).scrollFollow( { delay: 1000 // Выставляем задержку на 1 секунду } ); } ); </script>

Здесь delay - выставляет задержку на 1 секунду Посмотреть действие можно на 

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 благополучно проскользил поверх них. 
Посмотреть действие можно на 

Обратите внимание на то, что в любом примере у скользящего блока (#example, #example4) параметр position в css обязателен и должен быть absolute или relative.