Interaktív kép segítségével jquery
A teremtés ez a bemutató, én ihlette IKEA honlapján. ahol elérni valami hasonlót kell alkalmazni a Flash, bár meg kell jegyezni, jelenléte néhány további funkciók.
Online Tutorial

Ez a leírás megmutatja, hogyan kell megtervezni az alapvető szerkezetét a saját online kép.

Modern web fejlesztési technológiák
AngularJS, Webpack, NodeJS, ReactJS, géppel, korty, Git, GitHub.
Tudjon meg mindent a legújabb technológiák webfejlesztés
Létrehozása és helyezzen egy gomb „további információk”.
Gombok hozzáadása fejlécét.
Pattanógombok a leírásokat a pop-up ablakok információkat.
Leghatékonyabban használja ezt a bemutató, mint a módosítás utasításokat a feltöltött fájlokat a vásárlók igényeinek.
Állítsa be a kép
A közzététel előtt semmilyen gombot, akkor elő kell készíteni egy képet (én választottam egy képet irodánkban). Hozzunk létre egy div #picture. amely szolgál majd minket, mint a vásznon.
Meg kell beállítani a kívánt képméret és a háttér. Minden, amit megteszünk belül lesz ez a címke div.
Helyezzük az információ gomb
Minden gomb eltart néhány CSS stílusok, az első - ez az általános stílus a gombok, hogy lehet, nem kell módosítania, vagy alkalmazkodni egy kicsit.
A második kód, amely érinti a gombot - egy egyedülálló CSS, tárhely a gombot, mint a megfelelő területet a képet.

Modern web fejlesztési technológiák
AngularJS, Webpack, NodeJS, ReactJS, géppel, korty, Git, GitHub.
Tudjon meg mindent a legújabb technológiák webfejlesztés
Ezzel a szerkezettel, akkor lehet, hogy a sok gomb, amit akar a kép. A jQuery részén, megint megy vissza őket, és erőt a fejezetek jelennek meg, ha az egérrel egy gombot.
információs ablak
Ha rákattint egy látogató bármelyik gomb akkor csökkenteni kell a pop-up ablak, amely további információkat. Ha a készülék emelkedik, a háttérben kell elhalványulnak a figyelmet hozott adatokat.
HTML-kód a következőkre van szükség:
Ennek elérése érdekében a CSS egy információs ablak a halott a kép közepén. eltolja a bezárás gombra a jobb a kép egy részét, és elrejti takaró áttetsző png'om. (Megjegyzés: indul segítségével jQuery, mindaddig, amíg nem látható).
Építsd jQuery
Itt van - a pillanat, amikor a jQuery van szó, és ez egy áttörés - Ready, Set, Go!
Tehát, ha rákattint a linkre eltávolítjuk szaggatott kék vonal minden böngészőben.
Ahhoz, hogy csökkentse a jelölést, mi vonatkozik egy információs ablak az összes leírások a tárgyak és elrejteni azok, amelyek jelenleg nem használják. Ez a vonal fut keresztül a jelölés, és az alapértelmezett rejtőzködő divs tartalmazó #infobox. az oldal betöltésekor.
Amikor a látogató fölé információ gomb, amely kibővíti, és megmutatja a címe. Itt lehet beállítani a pontos szélességét, amelyen nő vagy csökken. Hogy megakadályozzák a bevezetését az egyiket, amelyen végzett az egér gombját, ideiglenesen kap nagyobb z-index.
Példa funkció kijelző leírását a téma - akkor meg kell megismételni ezt minden meglévő kulcsokat. Így jelenik meg a kívánt objektum leírását az információs ablak, amikor láthatóvá válik.
Ha rákattint egy sötét háttér vagy bezárás gombra, egy üzenet doboz és a háttér eltűnik, és minden a leírások ismét bujkál.
végső eredmény
Azt ajánlom, hogy használja kiindulási pontként a letöltött fájlok, mivel azok könnyebben alkalmazkodjanak az igények, mint kiindulási „a semmiből”. Végül, remélem, hogy tetszett a bemutató, és ez segít a tervezés a jövőbeli projektek.
Felülvizsgálat: Team webformyself.

Modern web fejlesztési technológiák
AngularJS, Webpack, NodeJS, ReactJS, géppel, korty, Git, GitHub.
Tudjon meg mindent a legújabb technológiák webfejlesztés
A legtöbb IT hírek és webfejlesztés A csatorna-távirat
