JQuery плъгин гладка хоризонтална съдържание, за да преминете наляво и надясно - Smooth Div превъртане.

Как става това?

Принципът се основава Smooth Div свитък е проста: един DIV (scrollArea) се превърта в друг DIV (scrollWrapper). два бутона със стрелки се използват за стартиране на свитъка (scrollingHotSpotLeft и scrollingHotSpotRight). Също така има възможност за включване на превъртане с помощта на докосване (пръст) на сензорния екран, колелцето на мишката, или просто да включите автоматично превъртане. scrollWrapper - определя коя област на scrollableArea ще се вижда - всичко извън дива scrollWrapper ще бъдат скрити.

Да разгледаме Проба 1 като пример на приставката.

Ние сме установили тези параметри в плъгина, потребителят може движение по снимките с помощта на клавишите със стрелки или колелцето на мишката. Също така, при зареждането на страницата се направи автоматично превъртане, и когато се движите лентата за превъртане спира да се превърта. Докоснете превъртане за тази Deme е изключена, опитайте се да го, можете да работите в демото "сензорен скролер"

HTML структура за тази демонстрация ще бъде:

Както можете да видите, ние имаме един контейнер на ID - makeMeScrollable. отнасящи се до които съдържанието му ще бъде, в този случай, изображението (може да бъде текст), превърната в превъртане единица.
За да се покаже правилно елементите, поставени в необходимостта на контейнера, за да се уточнят някои CSS стилове.
Репелент може да бъде, например, една от следните опции:

В тази демонстрация не съществува уплътнение между снимките, ако имате нужда от тях, използвайте подложка имота. и никаква свобода (което предизвиква грешки в IExplorer).

За да поддържа всички възможности на плъгина ще трябва да се свържете със страницата след скриптове и библиотеки:

Тук имаме JQuery библиотека, след което JQuery UI за потребителски ефекти, JQuery колелцето на мишката, за да превъртите с възможно колелцето на мишката, за възможността за кинетично превъртане допир (докосване) и той smoothdivscroll плъгин.

Call щепсел в този пример е, както следва:

• mousewheelScrolling. "AllDirections" - превъртете с колелцето на мишката във всички посоки (не всички мишки имат тази функция)
• manualContinuousScrolling. вярно - безкрайното превъртане, обсебени от идеята.
• autoScrollingMode. "OnStart" - автоматично превъртане на страницата е заредена, и пауза, когато задържите курсора на мишката върху скролера.

Списък с всички възможности, ще бъде по-ниска.

Доста много опции, но можете да инсталирате само тези, които са необходими за вас, останалите параметри ще бъдат определени в един режим - по подразбиране.

(След. (Колон) са настройките по подразбиране)

Създаване на класове за контрол:

• scrollingHotSpotLeftClass. "ScrollingHotSpotLeft" - низ - CSS клас за левия бутон, горещо
• scrollingHotSpotRightClass. "ScrollingHotSpotRight" - низ - CSS клас за правилните горещи бутони
• scrollableAreaClass. "ScrollableArea" - низ - CSS клас за действителното елемента, които можете да превъртате наляво или надясно
• scrollWrapperClass. "ScrollWrapper" - низ - CSS клас за черупки елемент

Разнообразие от възможности:

• hiddenOnStart. фалшиво - булев (вярно / невярно) - определя дали видими или скрити скролер при зареждането на страницата.

• getContent # 111; nload. <> (Null обект) - обект - използвайте тази опция, за да прехвърлите външно съдържание в скролера, когато страницата се зарежда. Тази настройка, трябва да се премине на името на метода, който искате да използвате за изтегляне на съдържание, което източникът на съдържанието, начина на манипулация (как ще се добави съдържанието на скролера), и по желание за филтриране тагове (селектор се използват за филтриране само на определено съдържание от съдържанието, което е избрано за трансфер) :

• countOnlyClass. "" (Празен низ) - низ - функция, която изчислява общата ширина на превъртате района, ще се брои само ширината на елементите, на класа, които ще бъдат определени в тази опция. Това може да бъде полезно, ако имате съдържание, което е групирана колони и колони имат само да превъртате. В противен случай, плъгин добавя ширината на всички елементи в колоните.

startAtElementId. "" (Празен низ) - низ - ако искате да скролер започва с определянето на елемент, посочете своя CSS ID в този вариант и след това да започне превъртане от този елемент, в противен случай превъртане ще започне с първия елемент.

Опции стрелка клавиши (горещи точки):

• hotSpotScrolling. вярно - булев (вярно / невярно) - за да активирате клавишите със стрелки (да / не)? Ако искате да използвате сензорния превъртане, най-добре е да се определят параметрите на този вариант е невярно.
• hotSpotScrollingStep. 15 - номер (в пиксели) - определя размера на стъпката за превъртане. По-високи стойности ще направи по-бързо превъртане, но по-малко гладка.
• hotSpotScrollingInterval. 10 - брой (MS) - броят на милисекунди между всяка стъпка превъртане. По-голяма стойност ще правят превъртате по-бавно, тъй като скролера ще чакат по-дълго преди да се предприеме следващата стъпка. Параметърът може да се сравни с рамките на филма, който е еквивалентен на броя на кадъра в секунда.
• hotSpotMouseDownSpeedBooster. 3 - номер (множител) - Използвайте тази опция, ако искате да се увеличи скоростта, когато потребителят кликне с мишката върху един от бутоните със стрелки (ляво / дясно). 1 - нормална скорост, 2 - два пъти по-бързо от нормалното, 3 - три пъти по-бързо, и така нататък. Настройката по подразбиране е 3.
• visibleHotSpotBackgrounds. "Задръжте" - низ - Общи настройки за бутони се появяват:

Възможни стойности: "" (празен низ), "зависване", "onStart" или "винаги".

1. "" - празен низ да направете фона невидими бутони винаги.
2. мишката - ще направи видими бутони на фона само когато движите мишката върху скролера.
3. onStart - прави видим фон -sekund X бутони (контролиран чрез hotSpotsVisibleTime опция) веднага след зареждането на страницата, след което те се крият.
4. винаги - на фона на бутоните (т.е. самите бутони) се вижда през цялото време.

Важно е да се отбележи. тази опция, се посочва, че само на външния вид на бутони, дори и чрез определяне на тяхната невидимост, всъщност, ще бъдат бутони са все още активни. Ако искате бутона, за да изглеждат по различен начин, а след това да ги промените в Photoshop и ощипвам им CSS, и има бутон, за да се превърне в добра отправна точка за собствените си експерименти.

• hotSpotsVisibleTime. 5000 - номер (мсек) - ако сте задали параметъра "onStart" за visibleHotSpotBackgrounds опция. Тогава, след това броят на секунди, които сте посочили тук, на фона става невидими бутони.
• easingAfterHotSpotScrolling. вярно - булев (вярно / невярно) - ако искате да използвате облекчаване ефекти, причинени след превъртане с помощта на бутоните, после вярно.
• easingAfterHotSpotScrollingDistance. 10 - номер (в пиксели) - задава разстоянието в пиксели, които ще се проведат след помощта на бутоните със скролер, превъртете до него. По-голяма стойност ще направи скролера по-гладка и по-спокоен, по-ниска настройка ще даде точност и твърдост. Препоръчително е наред с този вариант, и да направи корекции и easingAfterHotSpotScrollingDuration опция.
• easingAfterHotSpotScrollingDuration. 300 - номер (в милисекунди) - задава времето облекчаване ефект след превъртане с бутоните. С тази опция, че би било хубаво да се създаде и параметър easingAfterHotSpotScrollingDistance
• easingAfterHotSpotScrollingFunction. "EaseOutQuart" - низ - Тази опция определя функцията за облекчаване която ще се използва в края на книгата, като използвате бутоните.

Опции превъртете с колелцето на мишката

• mousewheelScrolling. "" - низ - определя дали активното колелце на мишката, за да превъртите и ако е така, как трябва да се работи;

1. "" - празен низ - превъртане с колелото на разстояние
2. "Вертикална" - превъртете вързани само във вертикално превъртане колело
3. "Хоризонтално" - превъртете вързан само за хоризонтално превъртане колело (там не са всички мишки)
4. "AllDirections" - двата вида, както и хоризонтално и вертикално превъртане може да се използва върху мишката.

• mousewheelScrollingStep. 70 - номер (в пиксела) - броя на пикселите, чрез които да преминете скролер където потребителят ще се колело на мишката. (Mouse колело ще изпрати номер, който обикновено е в границите от -3 до 3 в зависимост от посоката). По-голяма стойност ще доведе до по-бързо превъртане с колелото се дължи на по-голям терен.
• easingAfterMouseWheelScrolling. вярно - булев (вярно / невярно) - Дали ispolzovat облекчаване ефекти, докато превъртате колело? (Да / не)
• easingAfterMouseWheelScrollingDuration. 300 - номер (в милисекунди) - задава времето облекчаване ефект след приключване на колелцето за превъртане
• easingAfterMouseWheelScrollingFunction. "EaseOutQuart" - низ - задава функцията за облекчаване който ще се използва след приключване на превъртане с колелото.

Опции за превъртане на допир (докосване)

• touchScrolling. фалшиво - булев (вярно / невярно) - да се сбъдне. ако искате да използвате пръста превъртане на сензорни устройства, като например Iphone. IPAD. андроид и т.н. В допълнение, задържите бутона на мишката и да го движи, скролера също може да се превърта. За да работи един свитък докосване ще трябва да свържете допълнителен страница jquery.kinetic скрипт. И това се препоръчва да изключите опцията hotSpotScrolling. който не работи добре на устройствата със сензорен

Опции Ръководство за превъртане (горещи бутони, бутон за скролване, докоснете превъртане)

• manualContinuousScrolling. фалшиво - булев (вярно / невярно) - ако е настроено, за да е истина. ръководство ще бъде непрекъснат превъртане наляво или надясно. Тя работи за всички видове горещи бутони, бутон за скролване или докосване.

Опции за автоматично превъртане

• autoScrollingMode. "" - низ - определя параметрите на Auto Scroll:

1. "" (Празен низ) - да не се използва тази възможност, или поставете празен низ, за ​​да забраните автоматичното превъртане.
2. "OnStart" - превъртане ще се стартира автоматично след зареждане на страницата в съответствие с autoScrollDirection вариант - определя посоката, когато се движите показалеца на мишката към левия или десния клавиш, или като използва колелцето на мишката, за автоматично превъртане ще спре. След това ще можете да разгледате само с клавишите със стрелки или колелцето за превъртане.
3. "Винаги" - горещи клавиши са с увреждания, превъртане ще се случи само в автоматичен режим.

• autoScrollingDirection: "endlessLoopRight" - низ - опция определя посоката и поведението на автоматичното превъртане, и се използва само ако е активирана автоматично превъртане:

1. "В" - за автоматично превъртане надясно и да се спре в последния слайд.
2. "Ляв" - автоматично превъртане на ляво и да се спре на последния слайд. Задаването й "ляво" има смисъл само, ако сте задали startAtElementld. В противен случай, превъртане започва с първия слайд, и следователно не може да превъртите наляво, за да започне.
3. "BackAndForth" - Автоматично превъртане започва още когато достигне края, няма да има автоматична смяна на посоката и ще се превърта наляво и т.н. като пинг-понг.
4. "EndlessLoopRight" - автоматично право непрекъснато превъртане
5. "EndlessLoopLeft" - автоматично непрекъснато превъртане наляво

• autoScrollingStep. 1 - номер (в пиксели) - определя дължината на стъпката за автоматично превъртане. Все по-важно да се превърта по-бързо, но ще го направи по-малко гладка.
• autoScrollingInterval. 10 номер (в милисекунди) - задава колко милисекунди между стъпки за превъртане. По-голяма стойност ще правят превъртате по-бавно, тъй като превъртането ще чакат по-дълго време, преди да се предприеме следващата стъпка. Този параметър може да се сравнява с броя на кадрите в секунда в един филм.

метод Опции scrollToElement

• scrollToAnimationDuration. 1000 - номер (в MS) - определя анимация свитъка на конкретен елемент
• scrollToEasingFunction: "easeOutQuart" - низ - определя кои облекчаване функция да се използва

ИЗТЕГЛЯНЕ скок: 6687
1,74 Mb, които са изтеглили?