Su JQuery Fade galerija
Puslapis 1 iš 2
Ačiū jQuery galima suprasti labai paprasta vaizdų galerijos labai patraukli, šiuo paprasta pamoka mes matome, kaip sukurti paprastą išnyks galerijos arba galerijoje, kur vaizdai atsiras seka (vienas šalia kito), o ne naudojant išnyks poveikis malonus.
Norėdami pasiekti mūsų galerijos Nenaudokite jokių įskiepių, tačiau mes apsiriboti protingai juos naudoti įrankius, kurie suteikia JQuery.
Mes matome tai, ką mes ketiname peržiūra:
Mes analizuojame HTML kodas:
<html>
<head>
Pristatymas <title> galerija su 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>
Mes į puslapį į kurį mes priskirti div id fadegallery kūno, kurį mes vadiname antraštės ir išorės stiliaus lapo, jQuery bibliotekos ir failą fadegallery.js kurios taip kodas:
funkciją Rodyti (x) {$ ("# img" + X) Fadein ("lėtai").}
$ (Dokumentas). Ready
(
function ()
{
$ ("# Fadegallery"). Po ("
");
var img = new Array ();
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
img [0] = "pippo.jpg";
img [1] = "pluto.jpg";
img [2] = "paperino.jpg";
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
var i = 0;
(i = 0; I <img.length; i + +)
{
$ ("# Fadegallery"). Pridėkite ("+ i + <div id='img" "'class='boxfoto'> <img src='" + img[i] "'> </ div>") ;
window.setTimeout ("šou (+ i +") ", ((i + 1) * 1000));
}
}
);
Jo veikimas yra paprastas: Pirmiausia mes sukurti sparametryzowane funkcija, kuri reikalauja iš jQuery Fadein peržiūrėti funkcija (su išblukimo) įvairių DIV kurį mes statome dinamiškai ciklą, kad ištraukų visus elementus, kurie, savo ruožtu, masyvas, yra vaizdus ir puslapio maketų HTML.
Viduje kilpa, taip pat primena, funkcija rodo () su laikmačiu, skaičiuojant nuo antrojo ir toliau didinti sekundžių kiekviename žingsnyje, kad, būtent, sukurti poveikį seka.
Pastaba pareiškimą:
$ ("# Fadegallery"). Po ("
");
įterpiamas funkcijos () pradžia: Tai skirta slinkti bet kokį turinį, esantį po DIV į namus mūsų galerijoje (iš dalies sutampančių elementų nebuvimas gali sukelti nemalonų, nes plūdė nuosavybės CSS Mes naudojame, kad).
 |
CSS (kurso)
Web dizainas ir prieinamumas pagal W3C CSS ir XHTML. Nuo 29 €. |
 |
HTML (kurso)
Žymėjimo kalbą nuo 29 € internete. |
 |
Javascript (kursų)
Užbaigti vadovą kliento-side scripting. Nuo 39 €. |