Η Πινακοθήκη με jQuery Fade
Σελίδα 1 από 2
Χάρη στην jQuery είναι δυνατό να συνειδητοποιήσουμε μια πολύ απλή γκαλερί εικόνων του πολύ ελκυστική, σε αυτό το απλό tutorial θα δούμε πώς μπορείτε να δημιουργήσετε μια απλή συλλογή εξασθενίσει ή μία γκαλερί στην οποία οι εικόνες εμφανίζονται στη σειρά (το ένα δίπλα στο άλλο) και όχι με τη χρήση εφέ σβησίματος ευχάριστο.
Για την επίτευξη γκαλερί μας Μην χρησιμοποιείτε plugins, αλλά θα περιοριστούμε σε μια σοφή χρήση των εργαλείων που παρέχει jQuery.
Θα δείτε μια προεπισκόπηση του τι σκοπεύουμε να:
Αναλύουμε τον κώδικα HTML:
<html>
<head>
Μια γκαλερί <title> διαφανειών με 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"> </ p>
</ Body>
</ Html>
Εμείς, στο σώμα της σελίδας στην οποία εκχωρήσετε μια fadegallery ID DIV, καλούμε την κεφαλίδα και το εξωτερικό φύλλο στυλ, το jQuery βιβλιοθήκη και το αρχείο του fadegallery.js που ακολουθεί τον κωδικό:
Εμφάνιση λειτουργία (x) {$ ("# img" + x) fadeIn ("αργό")?.}
$ (Έγγραφο). Ready
(
λειτουργία ()
{
$ ("# Fadegallery"). Μετά το ("
")?
var img = Array νέα ()?
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
img [0] = "pippo.jpg"?
img [1] = "pluto.jpg"?
img [2] = "paperino.jpg"?
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
var i = 0?
για (i = 0? i <img.length? i + +)
{
$ ("# Fadegallery"). Προσάρτηση ("+ I + <div id='img" "'class='boxfoto'> <img src='" + + img[i] "'> </ div>") ?
window.setTimeout ("εμφάνιση (" + i + ")», ((i + 1) * 1000))?
}
}
)?
Η λειτουργία του είναι απλή: Πρώτα έχουμε δημιουργήσει ένα παραμετροποιημένο συνάρτηση που καλεί τη συνάρτηση της jQuery fadeIn για προβολή (με ξεθώριασμα) των διαφόρων DIV που χτίζουμε δυναμικά στον κύκλο που αφαιρεί όλα τα στοιχεία σε μια σειρά η οποία, με τη σειρά του, περιέχει εικόνες και διατάξεων σελίδας σε μορφή HTML.
Μέσα στο βρόχο, υπενθυμίζουν επίσης τα εμφανίζει λειτουργία () με ένα χρονόμετρο που εκτείνεται από μια δεύτερη και μια περαιτέρω αύξηση του δευτερολέπτου σε κάθε βήμα, προκειμένου, ακριβώς, για να δημιουργήσετε την ακολουθία αποτέλεσμα.
Σημειώστε τη δήλωση:
$ ("# Fadegallery"). Μετά το ("
")?
παρεμβάλλονται στην αρχή της συνάρτησης (): Αυτό έχει σχεδιαστεί για να μετακινηθείτε οποιοδήποτε περιεχόμενο που βρίσκεται κάτω από το DIV στο σπίτι γκαλερί μας (σε περίπτωση απουσίας επικάλυψη στοιχείων μπορεί να προκαλέσει δυσάρεστες, λόγω της ιδιοκτησίας επιπλέουν στο CSS Χρησιμοποιούμε αυτό).
 |
CSS (Μάθημα)
Σχεδίαση και Προσβασιμότητα, σύμφωνα με το W3C CSS και XHTML. Ξεκινώντας από 29 €. |
 |
HTML (Μάθημα)
Η γλώσσα σήμανσης για τον Παγκόσμιο Ιστό από 29 €. |
 |
Javascript (Μάθημα)
Πλήρης οδηγός για δέσμες ενεργειών στην πλευρά του πελάτη. Από 39 €. |