| Главная » Файлы » Статьи для вебмастера » Статьи для вебмастера |
Учимся прокручивать контент в блоках колёсиком через плагин jQuery Mousewheel by Apocalypse для uCoz
| 24.06.14, 16:26:08 | |
 Зачастую бывает так, что вам нужно прокручивать информацию в блоках, но надоедливый скроллбар мозолит глаза и портит весь внешний вид Данный скрипт позволит вам прокручивать любую информацию в любых блоках без использования полос прокрутки, лишь используя колёсик мышки Для начала посмотрите временное ДЕМО Установка: После /head на нужных страницах: Код <script src="/js/mousewheel.js"></script> <script> // Прокрутка колёсиком в блоках by ApoTeam (c) 2013 $(document).ready(function() { $('div.apoblock').mousewheel(function(event, delta, deltaX, deltaY) { if (delta == -1) { $(this).stop().scrollTo($(this).scrollTop() + 55, 300) } if (delta == 1) { $(this).stop().scrollTo($(this).scrollTop() - 55, 300) } return false; }); }); </script> Обратите внимание на 55 - это значение в пикселях, на которое будет прокручиваться блок при каждом движении колёсика мышки В самый низ вашего css: Код .apoblock { width:300px; height:110px; background: rgb(220, 250, 220); padding:10px; border:1px solid #ccc; overflow:hidden; } Количество блоков на странице может быть любое. Блоки оформляются следующим образом: Код <div class="apoblock"> Любой контент Любой контент Любой контент Любой контент Любой контент Любой контент 2 Любой контент 2 Любой контент 2 Любой контент 2 Любой контент 2 Любой контент 2 Любой контент 2 </div> Скрипт из прикреплённого архива залейте в папку js Материал подготовлен Apocalypse | |
| Просмотров: 340 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |