SMOOTH DIV SCROLL - ХОРИЗОНТАЛНО ПРЕВИВАНЕ НА СЪДЪРЖАНИЕТО
JQuery плъгин за плавно хоризонтално превъртане на съдържание наляво и надясно - Smooth Div Scroll.
Принципът задSmooth Div Scrollе прост: единDIV (scrollArea)се превърта в другDIV (scrollWrapper). Два бутона със стрелки, използвани за започване на превъртане(scrollingHotSpotLeft и scrollingHotSpotRight). Възможно е също така да активирате превъртане чрез докосване (пръст) на сензорния екран, колелото на мишката или просто да активирате автоматичното превъртане.scrollWrapper- определя коя област отscrollableAreaще бъде видима - всичко извънscrollWrapperdiv ще бъде скрито.
Зададохме параметрите на плъгина, така че потребителят да може да превърта през изображенията с помощта на бутоните със стрелки или с колелцето на мишката. Освен това при зареждане на страницата направиха автоматично превъртане и когато задържите курсора на мишката върху лентата за превъртане, превъртането спира. Скролирането с докосване е деактивирано за тази демонстрация, можете да го изпробвате в демонстрацията „скролер с докосване“
HTML маркиранеHTML структурата за тази демонстрация ще бъде:
Както можете да видите, имаме един контейнер с идентификатор - makeMeScrollable, като се позоваваме на който, ще превърнем съдържанието му, в този случай изображения (може би текст), в скролируем блок. За правилно показване елементите, поставени в този контейнер, трябва да получат определени CSS стилове.Можете да танцувате например от следната опция:
Това няма подложка между изображенията, ако имате нужда от нея, използвайте свойствотоpaddingвместоmargin(което причинява грешки вIExplorer).
javascriptЗа да поддържате всички функции на приставката, ще трябва да включите следните скриптове и библиотеки на страницата:
Тук имаме библиотекатаjQuery, след товаjquery uiза персонализирани ефекти,jquery mousewheelза превъртане на колелцето на мишката,kineticза превъртане с докосване (touch) и самия плъгинsmoothdivscroll.
Извикването на плъгина в този пример е както следва:
mousewheelScrolling: "allDirections"- превъртане с колелцето на мишката във всички посоки (не всички мишки имат тази възможност)manualContinuousScrolling: true- безкрайно превъртане, зацикляне.autoScrollingMode: "onStart"- автоматично превъртане при зареждане на страницата и пауза при задържане на курсора над скролера. Списъкът с всички опции ще бъде по-долу.
ОпцииИма доста опции, но можете да зададете само тези, които ви трябват, останалите параметри ще бъдат зададени в режим по подразбиране.
(След: (двоеточие) са посочени стойностите по подразбиране на параметрите)
Задаване на класове за контроли:scrollingHotSpotLeftClass: "scrollingHotSpotLeft" - низ- CSS клас за левия горещ бутонscrollingHotSpotRightClass: "scrollingHotSpotRight" - низ- CSS клас за десния горещ бутон, който може да се превърта наляво или надясноscrollWrapper Клас: "scrollWrapper" - string- CSS клас за обвиващ елемент
Различни опции:hiddenOnStart: false - boolean (true/false)- Определя дали скролерът ще бъде видим или скрит при зареждане на страницата.getContentonload: <>(празен обект) - обект - използвайте тази опция за прехвърляне на външно съдържание към скролера при зареждане на страницата. На тази настройка трябва да се даде имеметодът, който искате да използвате за зареждане на съдържанието, източникът на съдържание, методът на манипулиране (как съдържанието ще бъде добавено към скролера) и по желание филтриране на етикети (селектор, който се използва за филтриране само на определено съдържание от съдържанието, което е избрано за прехвърляне):
countOnlyClass: ""(празен низ) - низ - функция, която изчислява общата ширина на превъртаемата област, ще изчисли ширината само на тези елементи, чийто клас е посочен в тази опция. Това може да бъде полезно, ако имате съдържание, което е групирано в колони и само колоните трябва да могат да се превъртат. В противен случай плъгинът сумира ширината на всички елементи в колоните.
startAtElementId: ""(празен низ) - низ - ако искате скролерът да започне от определен елемент, тогава посочете неговия CSS идентификатор в тази опция и тогава превъртането ще започне от този елемент, в противен случай превъртането ще започне от първия елемент.
Опции за клавишите със стрелки (гореща точка):-hotSpotScrolling: true - boolean (true/false)- активиране на бутони със стрелки (да/не)? Ако искате да използвате сензорно превъртане, най-добре е да зададете тази опция на false. -hotSpotScrollingStep:15 - число (в пиксели) - задава размера на стъпката за превъртане. По-голямата стойност ще направи превъртането по-бързо, но по-малко гладко. -hotSpotScrollingInterval:10 - число (ms) - брой милисекунди между всяка стъпка на превъртане. По-голямата стойност ще направи превъртането по-бавно, тъй като скролерът ще изчака по-дълго, преди да предприеме следващата стъпка. Параметърът може да се сравни с кадрите във филм, тоест е еквивалентът на броя кадри в секунда. -hotSpotMouseDownSpeedBooster:3 - число (множител) - използвайте тази опция, акоискате да увеличите скоростта, когато потребителят щракне върху един от бутоните със стрелки (наляво/надясно). 1 е нормална скорост, 2 е два пъти по-бързо от нормалното, 3 е три пъти по-бързо и т.н. Стойността по подразбиране е 3. -visibleHotSpotBackgrounds:"hover" - низ - Общи настройки за видимост на бутоните: -Възможни стойности: ""(празен низ), "hover", "onStart" или "винаги". -""- празен низ ще направи фона на бутоните винаги невидим. -hover- ще направи фона на бутоните видим само когато задържите курсора на мишката върху скролера. -onStart- прави фона на бутоните видим за X-секунди (контролиран чрез опцията hotSpotsVisibleTime) веднага след зареждане на страницата, след което се скриват. -винаги- фонът на бутоните (т.е. самите бутони) се вижда през цялото време.Важно е да се отбележи,че тази опция задава само видимостта на бутоните, дори ако ги зададете невидими, всъщност бутоните ще продължат да бъдат активни. Ако искате бутоните да изглеждат различно, модифицирайте ги във Photoshop и ги настройте с CSS, а съществуващите бутони ще бъдат добра отправна точка, за да експериментирате със своите. -hotSpotsVisibleTime:5000 - брой (ms) - ако зададете параметъра "onStart" за опцията visibleHotSpotBackgrounds, след броя секунди, които посочите тук, фонът на бутона ще стане невидим. -easingAfterHotSpotScrolling:true - boolean (true/false) - ако искате да използвате ефекти за облекчаване след превъртане на бутон, задайте го на true. -easingAfterHotSpotScrollingDistance:10 - число (в пиксели) - задава разстоянието в пиксели, което скролерът ще измине след използване на бутоните за превъртане. По-голямата стойност ще направи скролера по-плавен и по-тих, по-малката стойност ще го направипараметър ще даде точност и твърдост. Препоръчително е, заедно с този параметър, да направите корекции и на опцията easingAfterHotSpotScrollingDuration. -easingAfterHotSpotScrollingDuration:300 - число (в ms) - задайте времето на ефекта на облекчаване след превъртане с бутоните. Заедно с тази опция би било хубаво да зададете easingAfterHotSpotScrollingDistance -easingAfterHotSpotScrollingFunction:"easeOutQuart" - низ - Тази опция дефинира функцията за облекчаване, която ще се използва в края на превъртане с бутони.
Опции за превъртане на колелцето на мишкатаmousewheelScrolling:"" - низ - определя дали колелцето на мишката ще бъде активно за превъртане и ако да, как трябва да работи:
Възможни стойности:-""- празен низ - превъртането на колелцето е забранено -"vertical"- превъртането е обвързано само с вертикално превъртане с колелцето -"horizontal"- превъртането е обвързано само с хоризонтално превъртане с колелцето (не всички мишки го имат) -"allDirections"- и двата вида, както и хоризонтално и вертикално превъртане могат да се използват на мишката. -mousewheelScrollingStep:70 - число (в px) - числото в пиксели, с което скролерът ще превърта, когато потребителят върти колелцето на мишката. (Колелцето на мишката ще изпрати число, което обикновено е между -3 и 3 в зависимост от посоката). По-голямата стойност ще доведе до по-бързо превъртане на колелото с цената на по-голяма стъпка. -easingAfterMouseWheelScrolling:вярно - булево (true/false) - Ще се използват ли облекчаващи ефекти при превъртане с колелцето? (Да/Не) -easingAfterMouseWheelScrollingDuration:300 - число (в ms) - определя продължителността на ефекта на облекчаванеслед завършване на превъртането на колелото -easingAfterMouseWheelScrollingFunction:"easeOutQuart" - низ - задава функцията за облекчаване, която да се използва след завършване на превъртането на колелото.
Опции за превъртане с докосване-touchScrolling:false - boolean (вярно/невярно) - задайте true, ако искате да използвате превъртане с пръсти на сензорни устройства като iphone, ipad, android и др. Освен това, чрез задържане на бутона на мишката и преместването му, скролерът също може да се превърта. За да работи превъртането с докосване, ще трябва допълнително да включите скрипта jquery.kinetic на страницата. И е препоръчително да деактивирате опцията hotSpotScrolling, която не работи добре на сензорни устройства
Опции за ръчно превъртане(горещи бутони, колело, превъртане с докосване) -ръчно непрекъснато превъртане: невярно - булево (true/false) - ако е зададено на true, ръчното превъртане ще бъде непрекъснато наляво или надясно. Работи за всички видове: горещи бутони, колело или докосване.
Опции за автоматично превъртане-autoScrollingMode:"" - низ - дефинира опции за автоматично превъртане:
Възможни стойности:-""(празен низ) - не използвайте тази опция или поставете празен низ, за да деактивирате автоматичното превъртане. -"onStart"- превъртането ще започне автоматично след зареждане на страницата според опцията autoScrollDirection - определяне на посоката, когато преместите показалеца на мишката върху левия или десния клавиш или използвате колелцето на мишката, автоматичното превъртане ще спре. След това ще можете да превъртате само с помощта на клавишите или колелото. -"винаги"- бързите клавиши ще бъдат деактивирани, превъртането ще се извършва само автоматичнорежим. -autoScrollingDirection:"endlessLoopRight" - низ - тази опция определя посоката и поведението на автоматичното превъртане и се използва само ако автоматичното превъртане е активирано:
Възможни стойности:-"right"- автоматично превъртане надясно и спиране на последния слайд. -"left"- автоматично превъртане наляво и спиране на последния слайд. Задаването на този параметър на "left" има смисъл само ако зададете опцията startAtElementld. В противен случай превъртането започва от първия слайд и следователно превъртането наляво няма да може да започне. -"backAndForth"- Автоматичното превъртане започва надясно, когато стигне до края, автоматично ще промени посоката и ще превърта наляво и т.н., като при пинг-понга. -"endlessLoopRight"- автоматично непрекъснато превъртане надясно -"endlessLoopLeft"- автоматично непрекъснато превъртане наляво -autoScrollingStep:1 - число (в px) - задава дължината на стъпката за автоматично превъртане. По-голямата стойност ще направи превъртането по-бързо, но също така ще го направи по-малко гладко. -autoScrollingInterval:10 число (в ms) - задава броя милисекунди между стъпките на превъртане. По-голямата стойност ще направи превъртането по-бавно, тъй като превъртането ще изчака по-дълго, преди да предприеме следващата стъпка. Този параметър може да се сравни с броя на кадрите в секунда във филм.
Опции за метода scrollToElement-scrollToAnimationDuration:1000 - число (в ms) - задава времето за анимация на превъртане към конкретен елемент -scrollToEasingFunction:"easeOutQuart" - низ - дефинира коя функция за облекчаване ще се използва