Gallery kanssa jQuery Fade
Sivu 1 2
Kiitos jQuery on mahdollista toteuttaa hyvin yksinkertainen kuvagallerioita erittäin houkutteleva, tässä yksinkertainen opetusohjelma näemme miten luoda yksinkertainen fade Galleria tai galleria, jossa kuvat näkyvät järjestyksessä (vierekkäin) sijaan käyttämällä fade vaikutus miellyttävä.
Saavuttamiseksi meidän galleriat ÄLÄ käytä mitään lisäosia, mutta me tyytyä viisas työkaluja joka tarjoaa jQuery.
Näemme esikatselu siitä, mitä aiomme:
Analysoimme HTML koodi:
<html>
<head>
Dia <title> gallerian kanssa 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>
Me itse sivun, johon asetamme div id fadegallery, kutsumme otsikon ja ulkoinen tyylisivu, jQuery kirjastoa ja tiedosto fadegallery.js josta seuraa koodi:
toiminto näyttää (x) {$ ("# img" + x). fadeIn ("hidas");}
$ (Document). Ready
(
function ()
{
$ ("# Fadegallery"). Jälkeen ("
");
var img = new Array ();
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
img [0] = "pippo.jpg";
img [1] = "pluto.jpg";
img [2] = "paperino.jpg";
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
var i = 0;
for (i = 0; i <img.length; i + +)
{
$ ("# Fadegallery"). Liitä ("+ i + <div id='img" "'class='boxfoto'> <img src='" + + img[i] "'> </ div>") ;
window.setTimeout ("show (" + i + ")", ((i + 1) * 1000));
}
}
);
Sen toiminta on yksinkertaista: Ensin luomme parameterized funktio, joka kutsuu funktio jQuery fadeIn katseluun (ja haalistumista) eri DIV joille rakennamme dynaamisesti sykli että otteet kaikki kohteet array joka puolestaan sisältää kuvia ja taittoja HTML.
Sisällä silmukka, myös muistaa toiminto näyttää () ja ajastin alkaa toinen ja lisäkorotukset sekuntia jokaisessa vaiheessa, jotta nimenomaan luoda vaikutus järjestyksessä.
Huom lausunto:
$ ("# Fadegallery"). Jälkeen ("
");
asetettu alussa toiminto (): Tämä on suunniteltu selaa sisältöä alla DIV taloon kuvagalleriassa (ilman päällekkäisiä elementtejä voivat aiheuttaa epämiellyttävää, koska float omaisuuden CSS Käytämme että).
 |
CSS (kurssi)
Web Design and Accessibility mukaan W3C CSS ja XHTML. Alkaen 29 €. |
 |
HTML (kurssi)
Merkkauskieli Web alkaen 29 €. |
 |
Javascript (kurssi)
Täydellinen opas client-side scripting. Alkaen 39 €. |