Creați imagine interactivă folosind jquery
La crearea acestui tutorial, am fost inspirat de site-ul IKEA. în cazul în care pentru a realiza ceva similar se aplică Flash, deși trebuie remarcat prezența unor caracteristici suplimentare.
Tutorial online
Acest tutorial vă va arăta cum să-și planifice structura de bază a propria imagine on-line.
Tehnologii moderne de dezvoltare web
AngularJS, WebPACK, NodeJS, ReactJS, typescript, Gulp, Git, Github.
Aflați totul despre cele mai noi tehnologii in dezvoltarea web
Creați și plasați un buton „mai multe informații.“
Adăugați butoane antete.
Ajustare butoane pentru descrierile din ferestre pop-up de informare.
utiliza cel mai eficient acest tutorial ca instrucțiunile de modificare a fișierelor încărcate la cerințele clientului.
Setați fotografia
Înainte de a posta orice butoane, aveți nevoie pentru a pregăti o imagine (am ales o imagine a biroului nostru). Să creeze un #picture div. care ne va servi ca o pânză.
Va trebui să se adapteze la dimensiunea dorită a imaginii și în fundal. Tot ceea ce vom face va fi în acest div tag-ul.
Plasați butonul de informații
Fiecare buton are câteva stiluri CSS, primul - este stilul general al butoanelor pe care nu putea avea nevoie să se adapteze sau să se adapteze destul de un pic.
A doua bucată de cod care afectează butonul - un CSS unic, care găzduiește butonul în zona corespunzătoare a imaginii.
Tehnologii moderne de dezvoltare web
AngularJS, WebPACK, NodeJS, ReactJS, typescript, Gulp, Git, Github.
Aflați totul despre cele mai noi tehnologii in dezvoltarea web
Folosind această structură, puteți face cât mai multe butoane, după cum doriți în imagine. În secțiunea jQuery, ne întoarcem din nou la ei și forța titlurile să apară atunci când treceți peste un buton.
fereastra de informații
Când faceți clic pe un vizitator pe oricare dintre butoanele de care aveți nevoie pentru a reduce fereastra pop-up care conține informații suplimentare. Atunci când această unitate se ridică, fondul ar trebui să se estompeze în atenția adus la date.
HTML codul pentru acest lucru aveți nevoie de următoarele:
Pentru a realiza acest lucru, CSS are o fereastră de informare în centrul mort al imaginii. mută butonul aproape de partea dreaptă a imaginii și obturează ascunzând png'om translucide. (Notă: Acesta va fi lansat cu ajutorul jQuery, atâta timp cât nimic nu este vizibil).
Construiți cu jQuery
Aici este - momentul în care jQuery este implicat, iar acest lucru este un progres - Ready, Set, Go!
Deci, atunci când faceți clic pe link-urile scoase linia albastră punctată în toate browserele.
Pentru a reduce cantitatea de marcare, vom aplica o fereastra de informații unică pentru toate descrierile obiectelor și a ascunde cele care nu sunt în prezent utilizate. Această linie trece prin marcaj și divs implicit ascunde conținând #infobox. atunci când se încarcă pagina.
Atunci când un vizitator trece peste butonul de informații care se extinde și se indică direcția acesteia. Aici puteți seta lățimea exactă, pe care este mărită sau micșorată. Pentru a preveni impunerea unuia dintre ei, pe care a efectuat butonul mouse-ului, primește temporar un indice mai mare z.
Exemplu funcția de afișare descriere a subiectului - va trebui să-l duplicat pentru fiecare dintre cheile existente. Astfel apare descrierea dorită a obiectului în fereastra de informații atunci când acesta devine vizibil.
Când se face clic pe un fundal întunecat sau un buton de închidere, o casetă de mesaj și fundal dispar, iar toate descrierile din nou ascund.
rezultat final
Am foarte recomandăm să folosiți ca punct de pornire al fișierelor descărcate, deoarece acestea sunt mai ușor să se adapteze la nevoile lor decât pornind „de la zero“. În cele din urmă, sper că va plăcut acest tutorial și vă va ajuta în proiectarea de proiecte viitoare.
Revizie: Echipa webformyself.
Tehnologii moderne de dezvoltare web
AngularJS, WebPACK, NodeJS, ReactJS, typescript, Gulp, Git, Github.
Aflați totul despre cele mai noi tehnologii in dezvoltarea web
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram
