В този урок, ние се обърне внимание на един много интересен плъгин, фиш, библиотека - наречете го както искате. За да се разбере по-добре работата на плъгин, нанесете го в един малък проект.
Като уеб разработчици, ние трябва да се справят всеки ден с някои готови функции направено, независимо дали е малък фрагмент или freymvork. Ако идеята ви не разполага с конкретни изисквания, то е вероятно, че ще намерите някои готови парчета за решаване на техните проблеми. Но като правило тези находки са предназначени за широка публика.
Ето защо, ние продължаваме серия от уроци по някои плъгини, ефекти, както и усъвършенствани техники. Ако приставките са малки, ние ще ги разглобим и да видим как се случва магията. В противен случай, ние ще създадем малки проекти, за да разбере как те могат да бъдат използвани в реалния свят.
Запознайте се с stickyFloat
Ето малко информация:
Но нека си го кажем, тази опция няма да работи еднакво във всички браузъри. Този проблем може да бъде много namuchalas, обръщане всякакви опции и в края на краищата все още трябва да мисля, че за тези цели е по-добре да използвате скрипт.
Това, което трябва към съдържание, листвани на страницата, когато се движат по него нагоре и надолу, но в рамките на родителския контейнер.
Тъй като уеб-а обхватът е много широк, можете лесно да намерите инструмент за решаване на този проблем. Нека да разгледаме един от тях, по-практичен и надежден, по мое мнение.
деконструира логиката
Логиката на този плъгин е сравнително лесно. Позволете ми да ви го докажа. Помниш ли какво функционалност изпълнява плъгин? Той създава плаващ елемент:
Нека да разгледаме един малък макет, показващ структурата на нашата страница:
Работата на този плъгин можете да се прави разлика между следните стъпки:
- Изчислява текущата позиция на родител елемент плаващ върху документа. Картината е маркирана като един.
- Взима височината на родителя - за да знаем кога да спре плаващ елемент, така че той не е преминал отвъд родител. Маркирано 2.
- Изчислете колко слезе - за това се нуждаем от данни за родителя - така че ние бяхме уверени, че не извън обхват. Картината, която се намира над хипотетичен хоризонтална линия служи като горната граница на текущия дисплей. В този случай, разстоянието ще бъде разстоянието от точка до точка за профилиране. Маркирано 3.
- Използването на тези ценности, които се изчисляват по-горе, можем да научим какво трябва да се измести позицията на плаващия елемент лесно.
Ако не го разбирам, не се притеснявайте. Нека разгледаме следния пример:
- Плаващият елемент е на разстояние от 10px от върха на своята майка.
- височина 100 пиксела родител.
- Потребителят надолу, за да 50px в един случай и в друг на 150px.
Знаейки тази информация, може да се изчисли, че:
В първия случай - плаващ елемент, който не трябва да се премести. Защо? Тъй като не изпадна в недрата на страницата, и ние все още имаме някои останало място, което се появява на нашия екран.
Във втория случай - ще бъдем подхлъзване. Когато стигнем до 150px, 10 кача на разстоянието между плаващия елемент и родителя, а останалата част се кача на разликата между две точки, споменати по-рано.
Ако все още не разбирам нищо, така че не се обезсърчават. Вие ще имате още един шанс, когато погледнем към кода.
синтактичен анализ на код
Тази приставка отнема само 30 реда код. Сега, аз бих искал да се разработят на всеки ред и да обясни значението му. плъгин код:
Стъпка 1 - обичайната начална точка за плъгин за JQuery. Както знаете, параметърът на опции е специален обект, който съдържа данни за инициализация на приставката. lockBottom, определя дали плаващ елемент е в долната част на родител или изчезват. Това е всичко.
Стъпка 2 - Получаване на достъп до елемента. В този контекст, това се отнася до DOM елемент, който минахме на функцията. Например, ако сте преминали #menu метод, това ще посочим страница елемент с него.
Стъпка 3 - Изчислете вътрешна подложка на елемента майка и съхраняване на данните за по-нататъшна употреба.
Стъпка 4 - Тук сме изчислява позицията на майка елемент, с помощта на вградения в JQuery офсетов метод. Ние не просто трябва да се прилага по отношение на елемента. променлива $ OBJ съдържа плаващ елемент. Прочетете документацията на API JQuery, ако не сте запознати с тези методи.
Стъпка 5 - тези действия често може да се види в развитието на приставка за JQuery. Като цяло, това е добра практика да се даде на променливите, които стойности по подразбиране.
Стъпка 6 - В плъгина ще бъде често се използва CSS върхова стойност, така че ние трябва да се приписват на плаващ елемент абсолютната позиция, ако не бяхме направили това и преди.
Стъпка 7 - обясних по-горе защо трябва стойността на lockBottom. Ако това е вярно, тогава ние започваме да правим изчисления. Изчисляваме точка, според която ние трябва да се позиционира на елемента.
Като цяло това може да бъде направено чрез изчисляване на височината на родителя, плаващ блок с всички маржове, но тази опция може да доведе до непредвидими последици.
Стъпка 9 - На първо място, ние трябва да се спре всичко анимация, която присъства на страницата. За това ние използваме метода стоп.
Стъпка 10 - тези три променливи съдържат стойности, които трябва в бъдеще.
- pastStartOffset проверява дали ние сме най-горната граница на майка елемент преминава. Не забравяйте, че ние сме с помощта на офсетов метод за намиране на разстоянието между горната и майка елемент. С цел да се знае колко далеч сме стигнали надолу метод ползване scrollTop. Това разстояние между началото на документа и на текущата позиция на плаващия елемент.
- objFartherThanTopPos проверки дали плаващ елемент в позиция, предоставена от него по подразбиране - в горната част на майка елемент. Ако се повиши страница от ръба на родител, в този случай не стартирането на движението.
- objBiggerThanWindow проверява дали височината е по-голяма от размера на прозореца на плаващ елемент. Ако е така, то няма смисъл да се използва този ефект.
Стъпка 11 - Това е мястото, където приставката изчислява дали е необходимо да се преместите елемента. Процесът е както следва:
- Се проверява, дали потребителят изчислява от порядъка на майка елемент. Ние също така да проверите позицията на плаващия елемент: дали е нагоре или надолу.
- Както вече беше посочено, ние използваме плъгина, само ако размерът на плаващия елемент не превишава размера на прозореца.
Започваме анимацията, когато тези две условия са верни.
Стъпка 12 - Тук сме дефинирате променлива newpos, които ще запазят позицията, на която трябва да се преобразува плаващия елемент. Както знаете, изчисленията лесно да се разбере, ако се разгледа внимателно снимката в началото на урока. Вземи разстоянието, на което се преместихме, ние добавяме разстоянието от горния отстъп майка и изваждане на разстоянието от страницата на дружеството майка - така тук. Тези изчисления ще ни помогнат да получите разстоянието в пиксели, при което положение ние трябва да се сложи плаващ елемент.
Стъпка 13 - Ако слязохме долу позиция на гама просто поставете този елемент от позицията на долната граница.
Стъпка 14 - Ако се отиде отвъд горната граница, а след това направи същото нещо, само с различна стойност.
Стъпка 15 - Това е! Ние просто правим анимацията чрез метод JQuery одушевен, минавайки на върха в получената стойност.
използването на
Ако не разберете как да използвате този плъгин, ето един пример:
Сега ние ще напиша един малък проект, който ще се използва плъгина.
До получаване на информация от два канала (зрение и слух) на ефективността на обучението далеч по-добър живот от книги. А домашните задачи и онлайн тестове ще ви позволи да мисля постоянно в целевия език и веднага провери знанията си!
Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!
Ако вече сте се научили HTML и искат да се движи напред, следващата стъпка ще бъде да се проучи CSS технологията.
Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!
Свързани статии