Стайлинг обичай за превъртане с помощта на CSS и JQuery, CSS
Със сигурност сте виждали сайтове с оригинални ленти за превъртане. Това се постига чрез използване на новия CSS превъртане свойства WebKit-превъртане. За съжаление, тя работи само в WebKit браузър двигател. Но JQuery се поддържа от почти всички браузъри. Да работи за превъртане стайлинг.
Тази функция се поддържа версии на Google Chrome за настолни компютри и мобилни устройства, Apple Safari. Flock. OmniWeb. Дори и да се създаде дизайн само за тези браузъри, без да използва JQuery. вие ще бъдете в състояние да покрие само 72% от потребителите на интернет. Но ако не сте алергични към програмирането, можете да бъдете сигурни, че всеки посетител ще види с красив дизайн за превъртане.
Стайлинг за превъртане
превъртане се изпълняват, където съдържанието е по-дълъг от ширината на прозореца на контейнер. С това вие получавате възможност да оформите вградена рамка. Разделение елементи и полето за въвеждане на текст. Вградената рамка, както и текстовото поле на прозореца на браузъра автоматично се добавя към лентата за превъртане в долната част, когато съдържанието е извън видимата област. Въпреки това, в контейнери, трябва да се предостави допълнителна информация за браузъри. Настройка на стойността на имотите превъртане при преливане казва на браузъра, който искате да се покаже лентата за превъртане, ако съдържанието е залято прозорец:
Това превъртане CSS код ще покаже плъзгач (вдясно)
Използване на CSS псевдо-елементи за персонализиране на лентата за превъртане
IE5.5 е първият браузър, за да подкрепят основните стилове за превъртане. Използване на лентата за превъртане лице цвят имота. Можете да бъдете промените цвета на ленти за превъртане. не Въпреки че е за добавяне на по-голямо разнообразие, но все пак по-добре от стандартната лента за превъртане в браузъра. Тъй като този имот все още се поддържа в Internet Explorer. може да се използва за потребители, които предпочитат този браузър.
За WebKit-базиран браузър с CSS, има много варианти за стайлинг: промените цвета и ширината на лентите с превъртане, плъзгачи. Елементи на книгата могат да бъдат избрани като се използва следната псевдо.
- . WebKit-плъзгач - ви позволява да настроите ширината и цвета на лентата за превъртане. Когато псевдо-настроен, WebKit оказване на разстояние вградената лента за превъртане и използва настройките, определени за Разделение превъртане CSS. Моля, имайте предвид, че това ще бъдат избрани всички барове превъртане присъстват на страницата. Ако искате да персонализирате лентата за превъртане, за определен елемент, трябва да използвате този имот за определен елемент:
- . -WebKit-плъзгач-палеца - Тази лента с плъзгач (това, което се запази и превъртане). Тя може да бъде цветен или да използвате градиент като фон. Пример за изпълнение:
- . -WebKit-плъзгач-писта - ви позволява да настроите лентата за превъртане песен (път движение плъзгач). Синтаксисът за псевдо CSS превъртане:
- . -WebKit-плъзгач-бутон - CSS3 разработчиците да губим от поглед малки бутони в краищата на лентата за превъртане. Те могат също така да се създаде, тъй като те помагат, когато страницата е дълъг и става прекалено малка лента за превъртане, за да се движи. Този имот е стилът на горните и долните ъгли (или ляво и дясно за хоризонтални ленти за превъртане):
- . -WebKit-плъзгач-ъгъл - може да се справи със ситуация, където има две ленти за превъртане, и се пресичат в ъгъла:
Ето няколко примера, които покажат силата свойства на превъртане CSS.
Персонализиране на лентата за превъртане с помощта Jquery
С този плъгин можете да създадете превъртане за всички видове браузъри. Така че аз ще ви посъветва да го използвате, за да спестите време и да обхваща всички браузъри наведнъж:
Ако искате да промените CSS свитък към настройките по подразбиране, предоставени от JScrollPane. трябва да редактирате стила на съответните елементи:
Персонализирани превъртане вече не са рядкост. Ще ги намерите на повечето сайтове и блогове. И JScrollPane е станал много по-лесно да се създадат и покажат стилизиран плъзгач във всички браузъри. Надявам се, че този урок е била полезна за вас.
Превод на статията "Scrollbar стайлинг, използвайки CSS и Jquery" е изготвен от екип на приятелски Уеб дизайн проект от А до Я.