markup-javascript.com

Прокрутка списка объектов по событию mousemove

Лето, жара… хочется отдыхать и купаться, но никак не писать интересные статьи :) поэтому опять я пишу с небольшим перерывом. Долго думал – чем же Вас порадовать на этот раз, “валидация форм” – большая статья (напишу позже разбив на пару частей :), “AJAX upload файлов” – хмм.. интересно, но нужен хороший пример (будет позже :), “как сделать свой JS фреймверк” – наверное будет цикл нескольких статей и начну точно не сегодня :)))

Вот так я долго не решался… но на днях у одного из моих коллег было задание сделать карусель, которая бы вращалась при перемещении мышки, причем по бокам были ПНГ затенения… похардкодив немного он конечно же сделал :))) Но у меня тоже были наработки по этому направлению, и я решил на выходных усовершенствовать свой плагин, чтобы он работал в любых условиях :)

Плагин – mouseGallerySlide

Вы можете открыть пример в новом окне.

В первом примере нажимать на картинки не получится, т.к. сверху лежит абсолютно позиционированный div, это я сделал специально, хотел показать, что сверху объекта могут накладываться любые слои не мешая функционалу плагина. Секрет в том, что события происходят в зависимости от положения мышки на странице. Если нужны кликабельные картинки и тени по бокам – повесьте два маленьких diva, тогда центральная часть списка будет доступна для клика.

Теперь детально по коду примера и плагина:

Как всегда опишу только нужную структуру HTML и CSS необходимые для работы плагина… все остальные эффекты это дело вашего воображения.

HTML:

CSS:

Для правильной работы плагина нам необходимо:
- объект-родитель с заданными размерами блока и overflow, position:relative ставится для IE, чтобы внутренние объекты не вылазили за границы
- двигающейся элемент, в нашем примере это UL с большоооой шириной… :)
- ну и флотнутые элементы галереи (li)

JavaScript:

В примере для этого плагина я воспользовался нестандартной инициализацией скрипта $(window).bind(‘load’, function(){…}), вместо $(document).ready(function(){…}), все из-за того, что такие браузеры как Chrome и Safari не правильно считают параметры блоков пока не загрузились картинки, это можно также поправить захордкодив ширину LI или задав размеры картинкам через атрибуты width и height… тут можно поступать как кому угодно.

Параметры плагина:

• scrollElParent – селектор двигающегося элемента
• scrollEl – селектор слайдов

Простой пример:

Вы можете открыть пример в новом окне.

Скачать плагин

Tags: JavaScript, jQuery, JS Plugins