Biblioteca jQuery are o mulțime de caracteristici în proiectarea și gestionarea elementelor. Să aruncăm o privire asupra unui exemplu simplu de implementare a unui bloc care apare ușor în Lightbox folosind jQuery.
Cum funcționează:
În primul rând, trebuie să generați conținutul HTML al paginii:
Să mergem la proiectarea ferestrei Lightbox. În codul de mai jos, proprietățile afișează: none; pentru unitățile cu clasele și .lightbox .overlay, este necesar să se deschidă inițial pagina la blocul conținutul nostru, iar unitatea de umbrire au fost ascunse. Blocul cu clasa .overlay este dat o poziție fixă din colțul din stânga sus, astfel încât acest bloc este semi-transparent, se adaugă proprietatea opacity: 0.8
Și ultimul lucru de care avem nevoie pentru funcționarea completă a ferestrei Lightbox este adăugarea scriptului de procesare a evenimentelor
Să aruncăm o privire mai atentă la ceea ce facem:
jQuery (".lightbox") css (<- добавляем CSS-свойства в lightbox элемент, устанавливаем фиксированную позицию по центру, даже во время прокрутки, а также устанавливаем отступ margin в соответствии с шириной и высотой lightbox элемента. Всё это позволит нам зафиксировать блок с нашим содержимым в центре даже во время прокрутки.
jQuery ("a.open") faceți clic pe (funcția (e) <- с помощью этой функции мы отображаем lightbox элемент и маску с угасания. Устанавливаем скорость затемнения и угасания 800, Вы можете сделать это быстрее или медленнее за счет уменьшения или увеличения значения соответственно.
jQuery ("a.close overlay") faceți clic pe (funcția (e) <- данной функцией мы просто скрываем lightbox элемент и наложения элементов при помощи FadeOut, в случае, если мышка была нажата или на ссылку закрытия окна Lightbox.
Puteți descărca un exemplu al acestui script din atașament la sfârșitul articolului.
Articole similare
-
Utilizarea efectelor de animație "ieșire-dispariție" și "intrare-prezentare 6015-18
-
Efect economic economic - o enciclopedie mare de petrol și gaze, articol, pagina 1
Trimiteți-le prietenilor: