Прокрутка контента в блоках колёсиком для uCoz

[ Скачать с сервера (1.5Kb) ]

Очень поучительный материал. Учиться никогда не поздно, особенно если дело касается прокручивания контента в блоках колесиком через небольшой плагин JQuery. Частенько былвает у васех у нас так, что нужно прокрутить информацию, находящуюся в блоках, а скроллбар не хочет помогать, а только мешает, мозолит глаза и портит все веселье от прокручивания. Посоветуйте хостинг для joomla, но зачем если и на uCoz есть такие замечательные фишки.

А вот этот плагин, который мы вам сегодня предлагаем, позволяет забыть про эти мелкие неприятности и прокручивать абсолютно любую информацию в любых блоках не используя полосы прокрутки. Но как же тогда крутить - спросите вы. Мышью! Колесиком мыши прокручивайте вашу информацию в блоках и +100500 вам к карме за это. Согласитесь, очень удобный метод и хороший плагин. Поздравления создатели принимают в комментариях. Ну а если серьезно, легенький и не сложный плагин действительно упрощает жизнь, когда информации очень много и скроллбаром ее крутить просто нету сил. А с мышкой всегда проще. В установке неприхотлив -  ставится скрипт после /head на нужных страницах. Количество блоков на странице можно установить любое - чем больше, тем интереснее проверять плагин на работоспособность. Так что от нас и от Ucoz  для вашего удобства. Принимайте!

Важно! Скрипт из прикреплённого архива залейте в папку js

Установка:

После /head на нужных страницах:

<scriptsrc="/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) } returnfalse; }); }); </script>

Обратите внимание на 55 - это значение в пикселях, на которое будет прокручиваться блок при каждом движении колёсика мышки

В самый низ вашего css:

.apoblock { width:300px; height:110px; background: rgb(220,250,220); padding:10px; border:1px solid #ccc; overflow:hidden; }

Количество блоков на странице может быть любое. Блоки оформляются следующим образом:

<divclass="apoblock"> Любой контент <br/> Любой контент <br/> Любой контент <br/> Любой контент <br/> Любой контент <br/> Любой контент 2 <br/> Любой контент 2 <br/> Любой контент 2 <br/> Любой контент 2 <br/> Любой контент 2 <br/> Любой контент 2 <br/> Любой контент 2 <br/> </div>