Създаване на интерактивни изображения с помощта на JQuery
От създаването на този урок, аз бях вдъхновен от уебсайта на IKEA. където да се постигне нещо подобно се отнася Flash, въпреки че трябва да се отбележи наличието на някои допълнителни функции.
Онлайн урок
Този урок ще ви покаже как да се планира основната структура на свой собствен онлайн имидж.
Съвременните технологии за уеб програмиране
AngularJS, WebPACK, NodeJS, ReactJS, пишеща машина, Gulp, Git, Github.
Научете всичко за най-новите технологии в уеб програмиране
Създаване и поставете бутон "повече информация".
Добавете бутони заглавки.
Направете бутони за описанията в изскачащи прозорци информация.
Най-ефективно да използват този урок като инструкциите за модифициране на качените файлове с изискванията на клиента.
Определете вашата снимка
Преди да изкажете никакви бутони, трябва да се подготви изображение (аз избрах една снимка на нашия офис). Да се създаде Разделение #picture. който ще ни послужи като платно.
Вие ще трябва да се приспособи към желания размер на изображението и фона. Всичко, което ние ще направим, ще бъде в рамките на този таг DIV.
Поставете бутон на информация
Всеки бутон отнема няколко CSS стилове, първият - това е общият стил на бутоните, че не може да се наложи да коригира или да се адаптира доста малко.
Втората част от код, който влияе върху бутона - уникален CSS, хостинг бутона над съответната област от изображението.
Съвременните технологии за уеб програмиране
AngularJS, WebPACK, NodeJS, ReactJS, пишеща машина, Gulp, Git, Github.
Научете всичко за най-новите технологии в уеб програмиране
С помощта на тази структура, можете да направите колкото се може повече бутони, колкото искате в изображението. В раздел JQuery, ние отново се върнем към тях и да принуди заглавията, за да се появи, когато мишката върху бутона.
информация прозорец
Когато кликнете посетител на някой от бутоните, което трябва да се намали изскачащия прозорец нагоре с допълнителна информация. Когато това устройство се издига, фонът трябва да избледняват до знанието доведени до данни.
HTML код за това ви е необходимо следното:
За да се постигне това, CSS има информационен прозорец в мъртъв центъра на изображението. измества бутона за затваряне на дясната част на картината и скрива прикриване полупрозрачни png'om. (Забележка: Това ще бъде стартиран с помощта на JQuery, доколкото нищо не се вижда).
Изграждане с JQuery
Ето това е - в момента, когато става дума за JQuery, а това е пробив - Ready, Set, Go!
Така че, когато щракнете върху връзките отстранени пунктирана синя линия във всички браузъри.
За да се намали количеството на маркиране, ние прилагаме един прозорец информация за всички описанията на обектите и да се скрият тези, които в момента не се използват. Тази линия минава през маркирането и по подразбиране скривалища divs, съдържащи #infobox. при зареждането на страницата.
Когато посетителят остава върху бутона информация, която се разширява и показва своята позиция. Тук можете да настроите точното ширина, на която тя се увеличава или намалява. За да се избегне налагането на един от тях, на която провежда бутона на мишката, временно получава по-висока Z-индекс.
Пример функция описание дисплей на темата - ще трябва да го дублира за всеки един от вашите съществуващи ключове. Така се появи желаният описанието на обекта в прозореца за информация, когато тя става видима.
Когато кликнете върху това затъмнена фон или бутон за затваряне, кутия за съобщения и фона изчезва, както и всички описанията отново се крият.
крайната резултат
Аз силно препоръчвам да се използва като отправна точка на свалените файлове, тъй като те са по-лесно да се адаптират към нуждите им, отколкото като се започне "от нулата". И накрая, надявам се, че ви хареса този урок и това ще ви помогне при проектирането на бъдещи проекти.
Редакция: Екип webformyself.
Съвременните технологии за уеб програмиране
AngularJS, WebPACK, NodeJS, ReactJS, пишеща машина, Gulp, Git, Github.
Научете всичко за най-новите технологии в уеб програмиране
Най-IT новини и уеб разработки на нашия канал Телеграма
