Galerija ar jQuery izbalināt
Lapa 1 no 2
Pateicoties jQuery ir iespējams īstenot ļoti vienkāršu attēlu galerijas par ļoti pievilcīga, jo šo vienkāršo apmācība mēs redzēsim, kā izveidot vienkāršu izbalināt galeriju vai galeriju, kuras gadījumā attēli tiek parādīti secībā (blakus viens otram), nevis izmantojot fade efektu patīkama.
Lai sasniegtu mūsu galerijas Nelietot plugins, bet mēs ierobežot sevi, lai gudri izmantojot instrumentus, kas nodrošina jQuery.
Mēs redzam preview par to, ko mēs plānojam:
Mēs analizējam HTML kodu:
<html>
<head>
Slaids <title> galerija ar 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>
Mēs ķermeņa lapu, lai ko mēs piešķirt DIV ID fadegallery, mēs saucam galvenes un ārējo stilu lapas, jQuery bibliotēku un failu fadegallery.js kura seko kodu:
funkcija rādīt (x) {$ ("# img" + x) fadeIn ("lēni");.}
$ (Dokuments). Ready
(
funkcija ()
{
$ ("# Fadegallery"). Pēc ("
");
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"). Append ("+ i + <div id='img" "'class='boxfoto'> <img src='" + + img[i] "'> </ div>") ;
window.setTimeout ("show (" + i + ")" ((i + 1) * 1000));
}
}
);
Darbības princips ir vienkāršs: vispirms mēs izveidojam parameterized funkciju, kas prasa funkciju jQuery fadeIn apskatei (ar fedings) dažādu DIV, kas mums veidot dinamiski cikla, izraksti visus elementus masīvā, kas, savukārt, satur attēlus un lapu izkārtojumi HTML.
Inside cilpa, arī atgādināt funkcija displeju () ar taimeri, sākot no otrās un turpmāku pieaugumu par sekundēm katrā posmā, lai, precīzāk, lai radītu efektu secību.
Piezīme paziņojumu:
$ ("# Fadegallery"). Pēc ("
");
ievietota sākumā funkcija (): Šis ir paredzēts, lai ritinātu visu saturu, kas atrodas zem DIV uz māju mūsu galerijā (ja nav savstarpēji pārklājošos elementus var izraisīt nepatīkamas, jo peldēt īpašuma CSS Mēs izmantojam, ka).
 |
CSS (Kurss)
Web Dizains un pieejamība saskaņā ar W3C CSS un XHTML. Sākot ar 29 €. |
 |
HTML (Kurss)
Iezīmēšanas valodu Web no € 29. |
 |
Javascript (Kurss)
Pilnīga rokasgrāmata, lai klienta puses skriptu. Sākot no € 39. |