O galerie cu Fade jQuery
Pagina 1 din 2
Datorită jQuery este posibil să se realizeze o galerii foarte simpla imagine de foarte atractiv, in acest tutorial simplu, vom vedea cum pentru a crea o galerie de decolorare simplu sau o galerie în care imaginile apar în secvenţă (unul langa altul), mai degrabă decât folosind un efect de decolorare plăcut.
Pentru a atinge galeriile noastre NU folosi orice plugin-uri, dar ne vom limita la o utilizare raţională a instrumentelor care oferă jQuery.
Am vedea o previzualizare a ceea ce ne propunem sa:
Noi analizăm codul HTML:
<html>
<head>
O galerie <title> diapozitiv cu jQuery </ title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript" src="fadegallery.js"> </ script>
</ Head>
<body>
<div id="fadegallery"> </ div>
</ BODY>
</ HTML>
Noi, în corpul paginii la care vom atribui o fadegallery ID-ul DIV, numim antet şi foaie de stil externa, biblioteca jQuery şi fadegallery.js dosar care urmează după codul:
prezintă o funcţie (x) {$ ("# img" + x) fadeIn ("lente");.}
$ (Document). Ready
(
function ()
{
$ ("# Fadegallery"). După ("
");
var img = new Array ();
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
img [0] = "pippo.jpg";
img [1] = "pluto.jpg";
img [2] = "paperino.jpg";
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
var i = 0;
pentru (i = 0; i <img.length; i + +)
{
$ ("# Fadegallery") Adaugă. ("+ I + <div id='img" "'class='boxfoto'> <img src='" + + img[i] "'> </ div>") ;
window.setTimeout ("spectacol (" + i + ")", ((i + 1) * 1000));
}
}
);
Funcţionarea sa este simplu: Mai întâi, să creaţi o funcţie parametrizat care solicită funcţia de fadeIn jQuery pentru vizualizare (cu fading) a diferitelor DIV pe care vom construi dinamic in ciclul de care extrage toate elementele într-o matrice care, la rândul său, conţine imagini şi aspecte de pagină în HTML.
În interiorul buclei, reamintesc, de asemenea, afişează funcţia () cu un timer care rulează la un al doilea şi o creştere suplimentară de secunde la fiecare pas, în ordine, tocmai, pentru a crea secvenţa de efect.
Notă declaraţia:
$ ("# Fadegallery"). După ("
");
introduc la început a funcţiei (): Acesta este conceput pentru a defila orice conţinut localizat sub DIV la casa galeria noastră (în absenţa unor elemente care se suprapun poate provoca neplacute din cauza proprietate flotorului în CSS Noi folosim acest lucru).
 |
CSS (Curs)
Web Design şi accesibilitatea în conformitate cu W3C CSS si XHTML. Incepand de la 29 €. |
 |
HTML (Curs)
Limbajul de marcare pentru Web de la 29 €. |
 |
Javascript (Curs)
Ghid complet pentru client-side scripting. De la 39 €. |