Αυτόματα αναδυόμενες περιγραφές εικόνων χρησιμοποιώντας jquery. Διαδραστικός χάρτης με αναδυόμενες συμβουλές. Εφέ θολώματος CSS3 jQuery

Η προσαρμοστική ή αν προτιμάτε η responsive σχεδίαση ιστοσελίδων δεν είναι πλέον απλώς μια άλλη σχεδιαστική τάση, είναι ήδη ένα ορισμένο πρότυπο για την ανάπτυξη ιστοσελίδων, διασφαλίζοντας την ευελιξία των ιστοσελίδων και την αρμονική οπτική αντίληψη στις οθόνες διαφόρων συσκευών χρηστών. Πιο πρόσφατα, κατά την ανάπτυξη ενός αποκριτικού προτύπου, έπρεπε να αντιμετωπίσω διάφορες δυσκολίες στην ενσωμάτωση ορισμένων ρυθμιστικών και γκαλερί εικόνων χωρίς να διαταραχθεί το συνολικό στυλ σχεδίασης. Στις μέρες μας όλα είναι πολύ πιο απλά, υπάρχει ένας τεράστιος αριθμός έτοιμων λύσεων στο Διαδίκτυο και αυτό που είναι ιδιαίτερα ευχάριστο είναι ότι οι περισσότερες από αυτές είναι ελεύθερα διαθέσιμες, ανοιχτού κώδικα.

Λόγω της ποικιλίας των εργαλείων που προσφέρονται, έχω συντάξει μια σύντομη επισκόπηση των πιο αξιοσημείωτων εξελίξεων των ρυθμιστικών εικόνων απόκρισης jQuery που εμφανίστηκαν πρόσφατα και διανέμονται χωρίς περιορισμούς, π.χ. εντελώς δωρεάν.

WOW Slider

Αποκριτικό ρυθμιστικό εικόνας jQuery με ένα υπέροχο σύνολο οπτικών εφέ (περιστροφή, διαφυγή, θάμπωμα, σπείρες, περσίδες, κ.λπ...) και πολλά έτοιμα πρότυπα. Με τον ενσωματωμένο οδηγό εισαγωγής σελίδας του WOW Slider, μπορείτε εύκολα και αβίαστα να δημιουργήσετε εκπληκτικές παρουσιάσεις διαφανειών μέσα σε λίγα λεπτά. Ο ιστότοπος του προγραμματιστή περιέχει όλη την απαραίτητη τεκμηρίωση για τη ρύθμιση και τη χρήση της προσθήκης στα ρωσικά, καθώς και εξαιρετικά ζωντανά παραδείγματα για το πώς λειτουργεί η προσθήκη. Ένα ξεχωριστό πρόσθετο Wordpress και μια ενότητα για το Joomla είναι επίσης διαθέσιμα για λήψη. Είμαι σίγουρος ότι σε πολλούς θα αρέσει αυτό το υπέροχο ρυθμιστικό, τόσο στους αρχάριους όσο και στους έμπειρους webmasters.

HiSlider

HiSlider - HTML5, ρυθμιστικό Jquery και συλλογή εικόνων, εντελώς δωρεάν πρόσθετο για προσωπική χρήση σε ιστότοπους που εκτελούν δημοφιλή συστήματα - WordPress, Joomla, Drupal. Με τη βοήθεια αυτού του απλού αλλά αρκετά λειτουργικού εργαλείου, μπορείτε εύκολα να δημιουργήσετε εκπληκτικά και ζωντανά slide shows, θεαματικές παρουσιάσεις και ανακοινώσεις νέων μηνυμάτων στις σελίδες των ιστοσελίδων σας. Πολλά έτοιμα πρότυπα και skins για το slider, εκπληκτικά εφέ μετάβασης (αλλαγής) περιεχομένου, έξοδος διαφόρων πολυμέσων περιεχομένου: βίντεο από το YouTube και το Vimeo, ευέλικτες ρυθμίσεις χρήστη κ.λπ...

Nivo Slider

Το Nivo Slider είναι ένα παλιό καλό, γνωστό σε όλους τους γνωστούς, ένα από τα πιο όμορφα και εύχρηστα ρυθμιστικά εικόνας. Το πρόσθετο JQuery Nivo Slider είναι δωρεάν για λήψη και χρήση και διαθέτει άδεια χρήσης βάσει της άδειας MIT. Υπάρχει επίσης ένα ξεχωριστό πρόσθετο για το WordPress, αλλά δυστυχώς είναι ήδη πληρωμένο και θα πρέπει να πληρώσετε 29 $ για μία άδεια. Είναι καλύτερα να κάνετε λίγη μαγεία με τα αρχεία θέματος WP και να επισυνάψετε τη δωρεάν έκδοση jQuery της προσθήκης Nivo Slider στο ιστολόγιό σας, καθώς υπάρχουν πολλές πληροφορίες για το πώς να το κάνετε αυτό στο Διαδίκτυο.
Όσο για τη λειτουργικότητα, όλα είναι καλά με αυτό. Χρησιμοποιεί τη βιβλιοθήκη jQuery v1.7+, όμορφα εφέ μετάβασης, απλές και πολύ ευέλικτες ρυθμίσεις, προσαρμοστική διάταξη, αυτόματη περικοπή εικόνας και πολλά άλλα.

Η ιδέα του ρυθμιστικού εμπνεύστηκε από τους προγραμματιστές, οι οποίοι είναι γνωστοί για το στυλ παρουσίασης των προϊόντων της Apple, όπου πολλά μικρά αντικείμενα (εικόνες) αλλάζουν κάνοντας κλικ στην επιλεγμένη κατηγορία με ένα απλό εφέ κίνησης. Το Codrops παρουσιάζει στη διάθεσή σας ένα λεπτομερές σεμινάριο για το πώς να δημιουργήσετε αυτό το ρυθμιστικό, μια πλήρη διάταξη της σήμανσης Html, ένα σύνολο κανόνων CSS και ένα εκτελέσιμο πρόσθετο jQuery, καθώς και ένα υπέροχο ζωντανό παράδειγμα χρήσης του ρυθμιστικού.

Slit Slider

Ρυθμιστικό εικόνας πλήρους οθόνης με χρήση JQuery και CSS3 + λεπτομερές σεμινάριο για την ενσωμάτωση της προσθήκης σε σελίδες ιστότοπου. Η ιδέα είναι να τεμαχίσετε την ανοιχτή τρέχουσα διαφάνεια με συγκεκριμένο περιεχόμενο κατά τη μετάβαση στο επόμενο ή προηγούμενο περιεχόμενο. Χρησιμοποιώντας κινούμενα σχέδια JQuery και CSS, μπορείτε να δημιουργήσετε μοναδικές μεταβάσεις μεταξύ διαφανειών. Η απόκριση διάταξη του ρυθμιστικού διασφαλίζει ότι φαίνεται εξίσου καλή σε διαφορετικούς τύπους συσκευών χρήστη.

Ελαστικό ρυθμιστικό περιεχομένου

Ένα ρυθμιστικό περιεχομένου που προσαρμόζεται αυτόματα σε πλάτος και ύψος ανάλογα με το μέγεθος του γονικού κοντέινερ στο οποίο βρίσκεται. Αρκετά απλό στην εφαρμογή και ευέλικτο στις ρυθμίσεις, το ρυθμιστικό εκτελείται στο JQuery, με πλοήγηση στο κάτω μέρος, όταν αλλάζετε το μέγεθος της οθόνης προς τα κάτω, η πλοήγηση εμφανίζεται με τη μορφή εικονιδίων. Πολύ αναλυτική τεκμηρίωση (εκμάθηση δημιουργίας) και ζωντανά παραδείγματα χρήσης.

3D Stack Slider

Μια πειραματική έκδοση του ρυθμιστικού που δείχνει εικόνες με μεταβάσεις από το τρισδιάστατο επίπεδο. Οι εικόνες χωρίζονται σε δύο οριζόντιες στοίβες, χρησιμοποιώντας τα βέλη πλοήγησης για αλλαγή και μετάβαση κάθε επόμενης εικόνας στην κατάσταση προβολής. Γενικά, τίποτα το ιδιαίτερο, αλλά η ίδια η ιδέα και η τεχνική εκτέλεσης είναι αρκετά ενδιαφέρουσες.

Ένα πολύ απλό ρυθμιστικό εικόνας jQuery με 100% απόκριση και πλήρη οθόνη. Η λειτουργία του ρυθμιστικού βασίζεται σε μεταβάσεις CSS (η ιδιότητα μετάβασης) σε συνδυασμό με τη μαγεία του jQuery. Η τιμή μέγιστου πλάτους έχει οριστεί στο 100% από προεπιλογή, επομένως το μέγεθος των εικόνων θα αλλάξει ανάλογα με τις αλλαγές στο μέγεθος της οθόνης. Δεν υπάρχουν ειδικά εφέ κινουμένων σχεδίων ή διακοσμητικά στοιχεία στο σχεδιασμό, όλα είναι απλά και σχεδιασμένα για απρόσκοπτη λειτουργία.

Ελάχιστες διαφάνειες

Το όνομα μιλάει από μόνο του, αυτό είναι ίσως ένα από τα πιο ελαφριά και μινιμαλιστικά ρυθμιστικά εικόνας jQuery που έχω συναντήσει (πρόσθετο 1kb). ResponsiveSlides.jsείναι ένα μικροσκοπικό πρόσθετο jQuery που δημιουργεί μια παρουσίαση χρησιμοποιώντας στοιχεία μέσα σε ένα κοντέινερ. Λειτουργεί με ένα ευρύ φάσμα προγραμμάτων περιήγησης, συμπεριλαμβανομένων όλων των εκδόσεων του IE - το διάσημο φρένο στην πρόοδο, από IE6 και νεότερες εκδόσεις. Η εργασία χρησιμοποιεί μεταβάσεις CSS3 σε συνδυασμό με javascript για αξιοπιστία. Απλή διάταξη με χρήση λίστας χωρίς σειρά, προσαρμογή μεταβάσεων και χρονικών διαστημάτων, αυτόματος και χειροκίνητος έλεγχος εναλλαγής διαφανειών, καθώς και υποστήριξη για πολλαπλές παρουσιάσεις ταυτόχρονα. Εδώ είναι ένα τόσο παιχνιδιάρικο "μωρό".

Κάμερα

Το Camera είναι ένα δωρεάν πρόσθετο JQuery για την οργάνωση προβολών διαφανειών σε σελίδες ιστότοπων, ένα ελαφρύ ρυθμιστικό με πολλά εφέ μετάβασης, μια διάταξη που ανταποκρίνεται 100% και πολύ απλές ρυθμίσεις. Ταιριάζει τέλεια στις οθόνες οποιασδήποτε συσκευής χρήστη (οθόνες υπολογιστή, tablet, smartphone και κινητά τηλέφωνα). Δυνατότητα επίδειξης ενσωματωμένου βίντεο. Αυτόματη αλλαγή διαφανειών και χειροκίνητος έλεγχος με χρήση κουμπιών και μπλοκ μικρογραφιών εικόνας. Μια σχεδόν πλήρης συλλογή εικόνων σε συμπαγή σχεδιασμό.

bxSlider jQuery

Ένα άλλο αρκετά απλό ρυθμιστικό με απόκριση στο jQuery. Μπορείτε να τοποθετήσετε οποιοδήποτε περιεχόμενο, βίντεο, εικόνες, κείμενο και άλλα στοιχεία στις διαφάνειές σας. Διευρυμένη υποστήριξη για οθόνες αφής. Χρήση κινούμενων εικόνων μετάβασης CSS. Ένας μεγάλος αριθμός διαφορετικών παραλλαγών προβολών διαφανειών και συμπαγών γκαλερί εικόνων. Αυτόματος και χειροκίνητος έλεγχος. Αλλάξτε τις διαφάνειες χρησιμοποιώντας κουμπιά και επιλέγοντας μικρογραφίες. Μικρό μέγεθος αρχείου προέλευσης, πολύ εύκολο στη διαμόρφωση και την εφαρμογή.

FlexSlider 2

FlexSlider 2 - Μια ενημερωμένη έκδοση του ομώνυμου ρυθμιστικού, με βελτιωμένη απόκριση, ελαχιστοποίηση του σεναρίου και ελαχιστοποίηση της εκ νέου ροής/επανασχεδίασης. Το πρόσθετο περιλαμβάνει ένα βασικό ρυθμιστικό, έλεγχο διαφανειών με μικρογραφίες, ενσωματωμένα βέλη αριστερά-δεξιά και μια κάτω γραμμή πλοήγησης με τη μορφή κουμπιών. Δυνατότητα προβολής βίντεο σε διαφάνειες (vimeo), ευέλικτες ρυθμίσεις (μεταβάσεις, σχεδιασμός, χρονικό διάστημα), πλήρως προσαρμοστική διάταξη.

Galleria

Ένα πολύ γνωστό και αρκετά δημοφιλές responsive πρόσθετο jQuery για τη δημιουργία γκαλερί εικόνων και ρυθμιστικών υψηλής ποιότητας. Η διεπαφή του ρυθμιστικού, χάρη στον πίνακα ελέγχου του, μοιάζει οπτικά με ένα οικείο πρόγραμμα αναπαραγωγής βίντεο, το πρόσθετο περιλαμβάνει πολλά διαφορετικά θέματα σχεδίασης. Υποστήριξη για ενσωματωμένα βίντεο και εικόνες από δημοφιλείς υπηρεσίες: Flickr, Vimeo, YouTube και άλλες. Λεπτομερής τεκμηρίωση για τη ρύθμιση και τη χρήση.

Μυρτιλός

Ένα απλό, δωρεάν ρυθμιστικό εικόνας JQuery γραμμένο ειδικά για ανταποκρινόμενη σχεδίαση ιστοσελίδων. Το Blueberry είναι ένα πειραματικό πρόσθετο jQuery ανοιχτού κώδικα. Μινιμαλιστικός σχεδιασμός, χωρίς εφέ, μόνο ομαλά αναδυόμενες εικόνες που αντικαθιστούν η μία την άλλη μετά από ένα ορισμένο χρονικό διάστημα. Όλα είναι πολύ απλά, εγκαταστήστε, συνδεθείτε και πηγαίνετε...

jQuery popaye 2.1

Ένα πολύ συμπαγές ρυθμιστικό εικόνας jQuery με στοιχεία Lightbox. Χάρη στις ευέλικτες διαστάσεις του, είναι πολύ εύκολο να ενσωματωθεί σε οποιοδήποτε κοντέινερ, σε μία μόνο καταχώρηση με τη μορφή μικρογραφιών, όταν τοποθετείτε τον κέρσορα του ποντικιού ή κάνετε κλικ πάνω τους, ενεργοποιείται ένα lightbox με μεγεθυμένη εικόνα και χειριστήρια. Είναι βολικό να τοποθετήσετε ένα τέτοιο ρυθμιστικό σε πλαϊνά πάνελ για να παρουσιάσετε προϊόντα ή ανακοινώσεις ειδήσεων. Μια εξαιρετική λύση για ιστότοπους με μεγάλο όγκο πληροφοριών.

Αλληλουχία

Δωρεάν αποκριτικό ρυθμιστικό με προηγμένες μεταβάσεις CSS3. Μινιμαλιστικό στυλ, 3 θέματα σχεδίασης, Κάθε καρέ ολισθαίνει οριζόντια, εμφανίζεται στο κέντρο, η εικόνα πηγαίνει προς τα αριστερά, η υπογραφή προς τα δεξιά, οι μικρογραφίες αντιγράφονται στην κάτω δεξιά γωνία. Σελιδοποίηση προβολών προϊόντων για προβολή σε κάθε πλαίσιο. Τα χειριστήρια περιλαμβάνουν επίσης κουμπιά πίσω και εμπρός. Υποστηρίζεται από όλα τα σύγχρονα προγράμματα περιήγησης.

Σουφρώνω

Ένα πολύ απλό ρυθμιστικό εικόνας τόσο από άποψη λειτουργικότητας όσο και από τις ρυθμίσεις, υπάρχει αλλαγή στην ταχύτητα αλλαγής διαφανειών, ενεργοποίηση της χειροκίνητης λειτουργίας (ενεργοποιούνται τα κουμπιά ελέγχου), η συνεχής προβολή διαφανειών. Αυτό το ρυθμιστικό έχει το δικαίωμα να υπάρχει και με τράβηξε μόνο επειδή υπάρχει δεν βρήκα κάτι ιδιαίτερα ενδιαφέρον σε αυτήν την εξέλιξη, ίσως δεν το έψαχνα καλά)))

Ρυθμιστικό εικόνας με απόκριση

Ένα τόσο όμορφο, προσαρμοστικό ρυθμιστικό εικόνας από τον Vladimir Kudinov, σύντροφοι. Ένα συμπαγές, καλά σχεδιασμένο εργαλείο, που παρέχεται με ενδεικτικά παραδείγματα και λεπτομερείς οδηγίες για τη δημιουργία, την εγκατάσταση και τη χρήση. Προσαρμοστικός σχεδιασμός, ωραία κουμπιά και πράσινα βέλη, όλα είναι αρκετά ωραία και ήρεμα, χωρίς πίεση.

FractionSlider

Δωρεάν πρόσθετο slider JQuery με εφέ parallax για εικόνες και διαφάνειες κειμένου. Τα κινούμενα σχέδια διαφανειών έχουν πολλαπλές τιμές εμφάνισης με πλήρη έλεγχο σε κάθε ρύθμιση χρονισμού και κίνησης. Η δυνατότητα κίνησης πολλών στοιχείων σε μια διαφάνεια ταυτόχρονα. Μπορείτε να ορίσετε διαφορετικές μεθόδους κινούμενης εικόνας, σβήσιμο διαφανειών ή μεταβάσεις από μια συγκεκριμένη κατεύθυνση. Αυτόματη εμφάνιση και χειροκίνητος έλεγχος χρησιμοποιώντας βέλη πλοήγησης που εμφανίζονται όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την εικόνα. 10 είδη εφέ κινουμένων σχεδίων διαφανειών και πολλά άλλα...

Η αναθεώρηση αποδείχθηκε αρκετά εκτενής, αλλά όχι αρκετά ενημερωτική λόγω του μεγάλου αριθμού προϊόντων που εξετάστηκαν. Μπορείτε να μάθετε όλες τις λεπτομέρειες και λεπτομερείς περιγραφές της λειτουργικότητας ενός συγκεκριμένου πρόσθετου απευθείας στις σελίδες των προγραμματιστών. Μπορώ μόνο να ελπίζω ότι έχω καταστήσει ευκολότερο για κάποιον να βρει αυτό το πολύ απαραίτητο εργαλείο για τη δημιουργία πολύχρωμων ρυθμιστικών εικόνων στις σελίδες των ιστότοπών του.

Έχετε σκεφτεί ποτέ ότι θα ήταν ωραίο να μπορέσετε να εργαστείτε με πρότυπα στη ρωσική γλώσσα; Σκεφτείτε το για ένα λεπτό. Δεν χάνετε χρόνο εργασίας με πρότυπα αγγλικής γλώσσας. Σπεύδουμε να σας ευχαριστήσουμε που μπορείτε πλέον να το βρείτε στην αγορά TemplateMonster. Το κείμενο για καθένα από αυτά γράφτηκε στο χέρι. Και, φυσικά, όλες οι έτοιμες λύσεις είναι απίστευτα εύχρηστες.

Με εκτίμηση, Andrey

1. Πρόσθετο jQuery "Hover Zoom"

Μια πρωτότυπη λύση για την υλοποίηση περιγραφών εικόνων όταν τοποθετείτε τον κέρσορα χρησιμοποιώντας το εφέ Ζουμ.

2. Πρόσθετο Captify

3. Περιγραφή jQuery των εικόνων στη συλλογή

Όταν τοποθετείτε τον κέρσορα, εμφανίζεται μια περιγραφή της εικόνας και η ίδια η εικόνα γεμίζει με ένα ημιδιαφανές στρώμα συγκεκριμένου χρώματος.

4. Υλοποίηση jQuery λεζάντες εικόνων

Πολλές επιλογές για την εφαρμογή λεζάντες για εικόνες που εμφανίζονται όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την εικόνα.

5. Εφέ συρόμενης πόρτας jQuery

Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από μια μικρογραφία, μια περιγραφή εμφανίζεται ουσιαστικά στη θέση της.

6. Πρόσθετο jQuery "Zoominfo"

Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από μια εικόνα, αυτή συρρικνώνεται και εμφανίζεται ο τίτλος και η περιγραφή της φωτογραφίας.

7. Πρόσθετο jQuery "Mosaic"

Υλοποίηση περιγραφών αναδυόμενων εικόνων όταν τοποθετείτε τον κέρσορα του ποντικιού. Υπάρχουν 8 διαφορετικοί τύποι αναδυόμενων λεζάντων. Μπορείτε να τα δείτε στη σελίδα επίδειξης.

Όταν τοποθετείτε το ποντίκι σας πάνω από την εικόνα, εμφανίζεται μια σύντομη περιγραφή με έναν σύνδεσμο προς λεπτομερείς πληροφορίες.

9. Πρόσθετο για την υλοποίηση υπογραφών εικόνας

Μια άλλη επιλογή για την εφαρμογή υποτίτλων αναδυόμενων εικόνων στο δείκτη του ποντικιού. Είναι δυνατή η επιλογή από δύο εφέ jQuery για την εμφάνιση των λεζάντων.

10. Περιγραφή εικόνων "Παράθυρο προεπισκόπησης"

Πρόσθετο για τη δημιουργία λεζάντας εικόνων. Όταν τοποθετείτε τον κέρσορα του ποντικιού με ένα κινούμενο εφέ, εμφανίζεται μια περιγραφή της εικόνας. Το jQuery χρησιμοποιείται για τη δημιουργία κινούμενων εικόνων.

Παρασκευάζεται από υλικά

Τα πρόσθετα jQuery είναι ένα από τα πιο απαραίτητα στοιχεία κατά την κατασκευή ενός ιστότοπου, ή μάλιστα οποιασδήποτε διαδικτυακής εφαρμογής. Σας επιτρέπουν να επεκτείνετε τη λειτουργικότητά σας. Αυτό το άρθρο παραθέτει τα πιο χρήσιμα πρόσθετα του 2012. Για πιο βολική αναζήτηση όλα τα πρόσθετα χωρίζονται στις ακόλουθες κατηγορίες: Διάταξη ιστοσελίδας - πρόσθετα, πρόσθετα πλοήγησης, Πρόσθετα φόρμας, πρόσθετα για τη δημιουργία ρυθμιστικών, πρόσθετα για γραφήματα και γραφήματα, εφέ για εικόνες και άλλα. Επίσης, μεταξύ αυτών των πρόσθετων είναι πρόσθετα που θα σας βοηθήσουν στη δημιουργία των αποκριτικών εφαρμογών σας.

Πρόσθετα διάταξης σελίδας

Το equalize.js είναι ένα πρόσθετο jQuery που σας επιτρέπει να δημιουργήσετε μια δομή ιστότοπου που βασίζεται σε μπλοκ. Σας επιτρέπει να προσαρμόσετε το ύψος και το πλάτος οποιουδήποτε στοιχείου.

Ένα νέο πρόσθετο για αποκριτικές διατάξεις, το Freetile σας επιτρέπει να δημιουργείτε στοιχεία οποιουδήποτε μεγέθους χωρίς να χρειάζεται να δημιουργήσετε στήλες πλέγματος σταθερού μεγέθους.

Gridster.JS jquery plugin για δημιουργία πλέγματος μεταφοράς και απόθεσης. Μπορεί επίσης να χρησιμοποιηθεί για δυναμική αφαίρεση και προσθήκη στοιχείων από το πλέγμα.

Zoomooz.jsείναι ένα εύχρηστο πρόσθετο jQuery για μεγέθυνση οποιουδήποτε στοιχείου σε μια ιστοσελίδα. Μπορείτε εύκολα να προσθέσετε ένα εφέ ζουμ προσθέτοντας απλώς την κλάση "zoomTarget" σε οποιοδήποτε στοιχείο HTML. Η μεγέθυνση μπορεί να μηδενιστεί κάνοντας κλικ στη σελίδα. Η προσθήκη έχει δοκιμαστεί σε Internet Explorer 9, Safari 3+, Firefox 3.6+, Opera και Chrome.

Το Wookmark είναι ένα πρόσθετο για τη δημιουργία ενός δυναμικού προτύπου πολλών στηλών.

Το jQuery HiddenPosition είναι ένα πρόσθετο που σας επιτρέπει να προσθέσετε οποιοδήποτε στοιχείο, ακόμα κι αν είναι κρυφό.

Το Stellar.js είναι ένα πρόσθετο jQuery που παρέχει ένα εφέ παράλλαξης για στοιχεία.

Ένα πρόσθετο jQuery που προσθέτει ένα πραγματικό εφέ αλλαγής σελίδας όταν μετακινείστε μεταξύ των ενοτήτων. Χρησιμοποιείται επιτάχυνση υλικού. Λειτουργεί σε tablet και smartphone.

Πρόσθετο για ανταποκρινόμενη τυπογραφία. Σας επιτρέπει να χρησιμοποιήσετε έναν επιλογέα που δημιουργεί το ιδανικό μέγεθος γραμματοσειράς.

Σας επιτρέπει να δημιουργήσετε κινούμενες κινήσεις γύρω από τον ιστότοπο, συμπεριλαμβανομένων όλων των πιθανών μετασχηματισμών

Πρόσθετα πλοήγησης

Το HorizontalNav είναι ένα πρόσθετο jQuery που επεκτείνει ένα οριζόντιο μενού ώστε να ταιριάζει σε όλο το πλάτος του κοντέινερ. Εάν έχετε προσπαθήσει ποτέ να δημιουργήσετε το εφέ της σωστής επέκτασης ενός μενού πλοήγησης σε ένα κοντέινερ CSS για ένα έργο, τότε σίγουρα γνωρίζετε πόσο δύσκολο είναι να το κάνετε αυτό για συμβατότητα μεταξύ προγραμμάτων περιήγησης. Αυτό το πρόσθετο το καθιστά εύκολο.

Το stickyMojo είναι ένα ελαφρύ, γρήγορο και ευέλικτο πρόσθετο jQuery sticky sidebar. Λειτουργεί με Firefox, Chrome, Safari και IE8+ (υποστηρίζει αρκετά καλά παλαιότερες εκδόσεις του IE).

Το ddSlick είναι ένα πρόσθετο που σας επιτρέπει να δημιουργείτε αναπτυσσόμενα μενού με εικόνες και περιγραφές.

Πρόσθετο για απλή οργάνωση αναπτυσσόμενων πινάκων. Η προσθήκη υποστηρίζει την εργασία με cookies για την αποθήκευση της κατάστασης των πάνελ. Μεταξύ των επιλογών είναι οι λειτουργίες επιστροφής για την προσαρμογή της διαδικασίας ανοίγματος και κλεισίματος τμημάτων.

Πρόσθετο για τη δημιουργία πτυσσόμενων μπλοκ που μπορούν να περιέχουν οποιαδήποτε δεδομένα σε περιορισμένο χώρο.

Διαμόρφωση πρόσθετων

Το πρόσθετο σάς επιτρέπει να προσδιορίσετε το επίπεδο πολυπλοκότητας του κωδικού πρόσβασης.

Πρόσθετο JQuery για την οπτικοποίηση της διαδικασίας λήψης αρχείων. Υποστηρίζει drag&drop και δημιουργεί άμεσες προεπισκοπήσεις για φωτογραφίες.

Ένα πρόσθετο που εντοπίζει και επαληθεύει αριθμούς πιστωτικών καρτών. Σας επιτρέπει να προσδιορίσετε τον τύπο της πιστωτικής κάρτας.

Πρόσθετο για φιλτράρισμα δεδομένων. Μπορείτε να φιλτράρετε δεδομένα ανά ετικέτα και σε πολλές ετικέτες και κατηγορίες.

Ένα πρόσθετο που ελέγχει την ακρίβεια της καταχώρισης email σε σχέση με μια προετοιμασμένη λίστα (οι πιο δημοφιλείς υπηρεσίες email mail.ru, yandrex.ru, gmail, κ.λπ. μπορούν να συμπεριληφθούν εδώ).

Πρόσθετα για τη δημιουργία ρυθμιστικών και καρουζέλ

Ένα πρόσθετο που σας επιτρέπει να ελέγχετε τις μεταβάσεις χρησιμοποιώντας το ποντίκι, την επιφάνεια αφής και το πληκτρολόγιο. Στις προεπιλεγμένες μεταβάσεις, μπορείτε να προσθέσετε επιπλέον, οι οποίες βρίσκονται επίσης στο αρχείο προέλευσης.

iosSlider

Το iosSlider είναι ένα πρόσθετο για ένα αποκριτικό ρυθμιστικό μεταξύ προγραμμάτων περιήγησης.

Το RSlider είναι ένα προσαρμοστικό ρυθμιστικό πλήρους οθόνης. ΓΙΑΘα προσαρμοστεί αυτόματα στο πλάτος της οθόνης σας.

Το Fresco είναι μια ανταποκρινόμενη προσθήκη lightbox. Μπορεί να χρησιμοποιηθεί για τη δημιουργία εκπληκτικών επικαλύψεων που λειτουργούν εξαιρετικά σε όλα τα μεγέθη οθόνης, σε όλα τα προγράμματα περιήγησης, σε όλες τις συσκευές.

BookBlock: Πρόσθετο αναστροφής περιεχομένου

Το BookBlock είναι ένα πρόσθετο jQuery που μπορεί να χρησιμοποιηθεί για τη δημιουργία στοιχείων τύπου φυλλαδίου που σας επιτρέπουν να δημιουργήσετε πλοήγηση σε στυλ αλλαγής σελίδας. Εδώ μπορείτε να χρησιμοποιήσετε οποιοδήποτε περιεχόμενο, είτε πρόκειται για εικόνες είτε για κείμενο. Το πρόσθετο μετασχηματίζει τη δομή μόνο όταν είναι απαραίτητο (με άλλα λόγια, μόνο όταν γυρίσει η σελίδα) και χρησιμοποιεί επικαλύψεις και σκιές για να προσθέσει ρεαλισμό.

Ο προσαρμογέας είναι ένα ελαφρύ ρυθμιστικό περιεχομένου που παρέχει μια απλή διεπαφή για τους προγραμματιστές για τη δημιουργία όμορφων κινούμενων εικόνων 2D ή 3D διαφανειών. Επί του παρόντος, υπάρχει υποστήριξη για ιδιότητες 3D σε προγράμματα περιήγησης webkit και Firefox. Όλες οι 2D μεταβάσεις έχουν δοκιμαστεί στον IE6+ και σε άλλα σύγχρονα προγράμματα περιήγησης.

Συνεχές καρουζέλ με πολλά χρήσιμα χαρακτηριστικά.Προσαρμόζεται εύκολα και υποστηρίζει ακόμη παλαιότερα προγράμματα περιήγησης.

Rhinoslider- αρκετά ευέλικτο jQueryπρόσθετο slideshow. Όχι μόνο υπάρχουν διαθέσιμα διάφορα εφέ, αλλά μπορείτε επίσης να προσθέσετε τα δικά σας στυλ, εφέ και δυνατότητες στο ρυθμιστικό.

Το Sequence είναι ένα πρόσθετο jQuery για κύλιση περιεχομένου με μοναδικό τρόπο και σας δίνει τον πλήρη έλεγχο. Μπορεί να χρησιμοποιηθεί οποιοδήποτε είδος περιεχομένου. θα κυλιέται ατελείωτα. Χρησιμοποιεί σημασιολογική σήμανση και υποστηρίζει επίσης αποκριτικά πρότυπα και συσκευές που βασίζονται στην αφή.

Το Glisse.js είναι μια απλή, αποκριτική και εξαιρετικά προσαρμόσιμη συλλογή φωτογραφιών jQuery.

Πρόσθετα για γραφήματα και γραφήματα

Το Morris.js είναι μια ελαφριά βιβλιοθήκη που χρησιμοποιεί JQuery και Raphaël για να διευκολύνει τη σχεδίαση γραφικών χρονοσειρών.

Το jQuery Org Chart είναι ένα πρόσθετο που σας επιτρέπει να δημιουργείτε δομές δέντρων με ένθετα στοιχεία. Τα δεδομένα εισάγονται σε μια ένθετη, μη ταξινομημένη λίστα, καθιστώντας το πρόσθετο απίστευτα εύκολο στη χρήση.

Πρόσθετα τυπογραφίας

Το Bacon.js είναι ένα πρόσθετο jQuery που σας επιτρέπει να τυλίξετε κείμενο γύρω από μια καμπύλη ή γραμμή Bezier.

Textualizer - πρόσθετο jQuery για δημιουργία όμορφων εφέ σε κείμενο. Υποστηρίζονται: Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,9+, Opera 10.6+, Mobile Safari (iOS 4)

Το SlabText είναι ένα πολύ χρήσιμο πρόσθετο jQuery που χωρίζει τις κεφαλίδες γραμμή προς γραμμή πριν αλλάξει το μέγεθος κάθε γραμμής για να γεμίσει τον διαθέσιμο οριζόντιο χώρο.

Το trunk8 είναι ένα πρόσθετο περικοπής κειμένου για το JQuery. Σας επιτρέπει να μειώσετε ένα μεγάλο μπλοκ κειμένου σε μικρότερο μέρος για προκαταρκτική επιθεώρηση.

Πρόσθετα για τη δημιουργία διαφόρων εφέ για εικόνες

Αυτό είναι ένα πρόσθετο jQuery που χρησιμοποιεί φίλτρα CSS3 για να δημιουργήσει ένα εφέ κλίσης.

Πρόσθετο για την υλοποίηση του εφέ προσαρμοστικών εικόνων.

Πρόσθετο jQuery που διευκολύνει τη δημιουργία χαρτών εικόνων. Με αυτό το εργαλείο, μπορεί να επισημανθεί ή να επιλεγεί οποιοσδήποτε χάρτης εικόνας και ο χειρισμός του χάρτη με διάφορους τρόπους. Λειτουργεί σε όλα τα μεγάλα προγράμματα περιήγησης, συμπεριλαμβανομένου του Internet Explorer 6, δεν χρησιμοποιεί Flash και δεν απαιτεί τίποτα άλλο εκτός από jQuery. Ορισμένα προηγμένα εφέ απαιτούν υποστήριξη HTML5, αλλά θα εξακολουθεί να λειτουργεί σε παλαιότερα προγράμματα περιήγησης.

Ενδιαφέρον εφέ κειμένου κατά την αιώρηση χρησιμοποιώντας jQuery.

Ένα πολύ πρωτότυπο σχέδιο για το ρυθμιστικό εικόνας, που θυμίζει ανεμιστήρα. Κινούμενη μετάβαση διαφανειών. Η πλοήγηση μεταξύ των εικόνων πραγματοποιείται χρησιμοποιώντας βέλη. Υπάρχει επίσης μια αυτόματη αλλαγή που μπορεί να ενεργοποιηθεί και να απενεργοποιηθεί χρησιμοποιώντας το κουμπί Αναπαραγωγή/Παύση που βρίσκεται στο επάνω μέρος.

3. Cool σχεδιασμός διαγραμμάτων στον ιστότοπο

Κινούμενο γράφημα πίτας που δημιουργήθηκε χρησιμοποιώντας τη βιβλιοθήκη JavaScript Raphaël.

Εύκολο αναπτυσσόμενο μενού CSS3 για τον ιστότοπο.

Κινούμενο ρυθμιστικό jQuery. Οι εικόνες φόντου κλιμακώνονται αυτόματα καθώς αλλάζει το μέγεθος του παραθύρου του προγράμματος περιήγησης. Για κάθε εικόνα εμφανίζεται ένα μπλοκ με περιγραφή.

6. Κινούμενη εικόνα jQuery στο παρασκήνιο στη σελίδα

Κινούμενο εφέ jQuery κατά τη μετακίνηση του δρομέα στην οθόνη.

7. Πρόσθετο Blackbird

Η λειτουργική λύση είναι ανάλογη με την alert() στο JavaScript. Μπορείτε να διαβάσετε περισσότερα σχετικά με τη χρήση του Blackbird στη δοκιμαστική σελίδα.

8. Βιβλιοθήκη Ajax των στοιχείων JSF "OpenFaces"

Ένα σύνολο από διάφορα στοιχεία του Ajax στο πλαίσιο ανοιχτού κώδικα JFS για τη δημιουργία στοιχείων διεπαφής χρήστη. Το σύνολο στοιχείων περιλαμβάνει τα πιο κοινά στοιχεία διεπαφής: στοιχεία για εργασία με πίνακες και γραφήματα, καρτέλες, αναδυόμενα παράθυρα, φίλτρα, μενού, ημερολόγια, στοιχεία για εργασία με φόρμες και πολλές άλλες λύσεις Ajax. Μπορείτε να δείτε όλα τα στοιχεία σε δράση στη σελίδα επίδειξης. Το OpenFace διανέμεται με δύο τύπους αδειών: δωρεάν και εμπορική.

9. "Wijmo" ένα σύνολο γραφικών στοιχείων διεπαφής χρήστη jQuery για τη δημιουργία στοιχείων διεπαφής χρήστη

Μια συλλογή από επαγγελματικά widget για προγραμματιστές ιστού. Το σετ Wijmo περιλαμβάνει τις ακόλουθες δωρεάν λύσεις jQuery: ακορντεόν, ημερολόγια, αναδυόμενους διαλόγους, επεκτάσεις, στυλιζαρισμένες φόρμες, διάφορες λίστες, μενού, γραμμές προόδου, καρτέλες, συμβουλές εργαλείων και άλλα χρήσιμα γραφικά στοιχεία. Εκτός από τις δωρεάν λύσεις, οι προγραμματιστές Wijmo προσφέρουν επίσης υψηλής ποιότητας εμπορικές εξελίξεις jQuery UI. Μετά τη λήψη του αρχείου, μπορείτε να δείτε όλα τα πιθανά γραφικά στοιχεία σε δράση που βρίσκονται στον κατάλογο wijmo-open/development-bundle/samples. Αυτό το κιτ είναι βέβαιο ότι θα σας εξοικονομήσει πολύ χρόνο κατά την ανάπτυξη των έργων σας στο web.

10. Σχεδιασμός πεδίου αναζήτησης χρησιμοποιώντας jQuery

Κινούμενη σχεδίαση του πεδίου για την εισαγωγή ερωτήματος αναζήτησης. Το εφέ μπορεί να παρατηρηθεί κάνοντας κλικ με το ποντίκι στο πεδίο εισαγωγής. Ένα κουμπί για την έναρξη της αναζήτησης εμφανίζεται μετά την εισαγωγή ενός ερωτήματος χρησιμοποιώντας το πληκτρολόγιο.

11. Ρυθμιστικό «Flux Slider» χρησιμοποιώντας jQuery και CSS3

12. Κείμενο jQuery Scalable "Sliding Letters"

Πρόσθετο για τη δημιουργία επεκτάσιμου κειμένου ανάλογα με το μέγεθος του παραθύρου του προγράμματος περιήγησης. Όσο μεγαλύτερο είναι το παράθυρο του προγράμματος περιήγησης, τόσο μεγαλύτερο είναι το κείμενο. Λάβετε υπόψη ότι αυτό το εφέ δεν πρέπει να χρησιμοποιείται για κανονικό κείμενο σε παραγράφους. Είναι κατάλληλο μόνο για την εμφάνιση τεράστιων επιγραφών, για παράδειγμα, σε ιστότοπους προώθησης. Ένα παράδειγμα μπορεί να δει κανείς στη σελίδα επίδειξης. Δοκιμάστε να αλλάξετε το μέγεθος του παραθύρου για να δείτε το αποτέλεσμα.

13. Παρουσίαση "Awkward"

Λειτουργική προβολή διαφανειών. Οι διαφάνειες μπορεί να είναι: απλές εικόνες, εικόνες με λεζάντες, εικόνες με συμβουλές εργαλείων, βίντεο. Μπορείτε να χρησιμοποιήσετε βέλη, συνδέσμους αριθμών διαφανειών και πλήκτρα αριστερά/δεξιά στο πληκτρολόγιό σας για πλοήγηση. Η παρουσίαση διατίθεται σε διάφορες εκδόσεις: με και χωρίς μικρογραφίες. Για να δείτε όλες τις επιλογές, ακολουθήστε τους συνδέσμους Επίδειξη #1 - Επίδειξη #6 που βρίσκονται στο επάνω μέρος της δοκιμαστικής σελίδας.

14. Πρόσθετο jQuery "jQueryZoom"

Με αυτό το πρόσθετο μπορείτε να προσθέσετε ένα εφέ μεγέθυνσης εικόνας στο δείκτη του ποντικιού ή να προσθέσετε μια επικάλυψη σε αυτό. Το πρόσθετο προσαρμόζεται εύκολα για να ταιριάζει στις ανάγκες σας.

15. Συλλογή jQuery "jSwitch"

Κινούμενη γκαλερί jQuery.

16. Γκαλερί JavaScript με εφέ 3D

17. Gallery "jQuery morphing gallery"

Νέο ρυθμιστικό jQuery. Αρκετά δροσερά κινούμενα εφέ κατά την αλλαγή διαφανειών.

18. Νέο μενού CSS3 σε στυλ Apple

Νέο μενού σε στυλ Apple. Φαίνεται πιο σκούρο από πριν, αλλά όχι λιγότερο χαριτωμένο.

19. Νέα υλοποίηση των συμβουλών εργαλείων χρησιμοποιώντας jQuery "Tooltipsy"

Πολλά διαφορετικά εφέ επεξήγησης εργαλείου αιώρησης.

20. Συλλογή JavaScript για προβολή σε κινητές συσκευές "PhotoSwipe"

Μια συλλογή εικόνων βελτιστοποιημένη για προβολή σε κινητές συσκευές (τηλέφωνα ή tablet).

21. Κομψό μενού CSS3

22. Πρόσθετο jQuery "Μεγεθυντικός φακός"

Η επίδραση της αύξησης της περιοχής της εικόνας στο δείκτη του ποντικιού.

23. Καλάθι παραγγελιών Ajax “Easy Basket” για ηλεκτρονικό κατάστημα

Ένα λειτουργικό καλάθι αγορών για ένα ηλεκτρονικό κατάστημα με ενσωματωμένους τρόπους πληρωμής για αγαθά που χρησιμοποιούν PayPal ή Google Checkout. Τεχνολογίες που χρησιμοποιούνται: HTML, CSS, jQuery, AJAX, PHP, XML, XSL. Ενσωματώνεται εύκολα σε μια ιστοσελίδα και προσαρμόζει την εμφάνιση του καλαθιού αγορών.

24. Πρόσθετο jQuery "Εφέ πλοήγησης πλέγματος"

Πρωτότυπη πλοήγηση μεταξύ μικρογραφιών εικόνων. Για να δείτε το εφέ στη δεξιά πλευρά της δοκιμαστικής σελίδας, κάντε κλικ στα κουμπιά Πάνω και Κάτω. Αυτή η λύση jQuery παρέχει επίσης ένα εφέ όταν τοποθετείτε το δείκτη του ποντικιού πάνω από μια μικρογραφία.

25. Εφέ φόντου "Vertical Parallax"

5. Αλλαγή του τύπου εμφάνισης μπλοκ σε jQuery

Χρησιμοποιώντας αυτήν την προσθήκη jQuery “Switch Display Options”, μπορείτε να εφαρμόσετε έναν διακόπτη στη σελίδα, με τον οποίο ο επισκέπτης θα μεταβεί από μια απεικόνιση σε πίνακα πληροφοριών σε μια πλήρη προβολή με περιγραφή των μπλοκ. Ιδανικό για υλοποίηση χαρτοφυλακίου.

26. Αναλογικό ρολόι με jQuery

27. χαρτοφυλάκιο jQuery HTML5

Υλοποίηση ενός όμορφου χαρτοφυλακίου χρησιμοποιώντας jQuery και HTML5. Το χαρακτηριστικό του χαρτοφυλακίου βρίσκεται στο υλοποιημένο φίλτρο. Διαφορετικά έργα στο χαρτοφυλάκιο εμφανίζονται ανάλογα με την επιλεγμένη κατηγορία.

28. Γκαλερί με μινιατούρες “TN3 Gallery”

Συλλογή jQyery με μικρογραφίες. Έχει υλοποιηθεί η δυνατότητα προβολής σε συμπαγές παράθυρο και σε παράθυρο πλήρους οθόνης, καθώς και η δυνατότητα απενεργοποίησης/ενεργοποίησης αυτόματης αλλαγής διαφανειών.

29. Περιγραφή εικόνων "Παράθυρο προεπισκόπησης"

Πρόσθετο για τη δημιουργία λεζάντας εικόνων. Όταν τοποθετείτε τον κέρσορα του ποντικιού με ένα κινούμενο εφέ, εμφανίζεται μια περιγραφή της εικόνας. Το jQuery χρησιμοποιείται για τη δημιουργία κινούμενων εικόνων.

30. Γαϊτανάκι JavaScript

31. Πλέγμα εικόνων "Grid-Gallery"

36. Παρουσίαση

Στην επάνω δεξιά γωνία της διαφάνειας μπορείτε να ενεργοποιήσετε/απενεργοποιήσετε την αυτόματη αλλαγή διαφανειών.

37. Αναπτυσσόμενο μενού "jbar"

38. Κινούμενο μενού με jQuery

Κινούμενο μενού. Τα στοιχεία μενού παρουσιάζονται με τη μορφή εικονιδίων και περιγραφών. Πολλά εξαιρετικά εφέ όταν τοποθετείτε το ποντίκι πάνω από ένα στοιχείο μενού. Υπάρχουν 8 εφέ, για να τα δείτε όλα - ακολουθήστε τους συνδέσμους Exemple1-Exemple8 στη σελίδα επίδειξης.

39.jQuery slideshow

Παρουσίαση με πρωτότυπο εφέ αλλαγής εικόνων.

40. Κινούμενο εφέ jQuery CSS3

41. Συλλογή εικόνων jQuery

Συλλογή jQuery με λεζάντες εικόνων. Αρκετά εφέ μετάβασης διαφανειών. Η πλοήγηση μεταξύ των εικόνων πραγματοποιείται είτε χρησιμοποιώντας βέλη είτε κάνοντας κλικ στη μικρογραφία.

Εφέ φόντου (κίνηση μέσω στρωμάτων). Στη σελίδα επίδειξης, μετακινήστε το ποντίκι σας στην οθόνη για να δείτε το εφέ σε δράση.

43. Πρόσθετο σελιδοποίησης jPaginator CSS3

44. Πρόσθετο Plasm The Wall

Για να δημιουργήσετε μοναδικούς "τοίχους" από φωτογραφίες ή μπλοκ HTML που μπορούν να συρθούν στην οθόνη σε μια σταθερή περιοχή χρησιμοποιώντας το ποντίκι.