Προβολή παρουσίασης JavaScript με το CSS

• Ενδέχεται 2, 2024

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

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



Η αρχική μετατροπή σε CSS ήταν εύκολη, αφού μόνο η μεγάλη εικόνα είχε πληροφορίες styling και είχε ήδη ένα ταυτότητα χαρακτηριστικό που χρησιμοποιήθηκε για σκοπούς JavaScript.

#largeImage {
σύνορα: 2χλ.
πλάτος: 544px;
ύψος: 408px;
}

Δεν είχα συμπεριλάβει προηγουμένως πληροφορίες μεγέθους για τις μικρογραφίες, αλλά πρόσθεσα μια κλάση που ονομάζεται αντίχειρες και ορίστε ετικέτες ετικετών σε αυτήν την κλάση για να ορίσετε το μέγεθος σε 40px με 40px. Αυτό σημαίνει ότι ακόμα και αν φορτώσω τυχαία εικόνες που είναι πολύ μεγάλες ή μικρές για μικρογραφίες, θα υποχρεωθούν να εμφανίζονται σε μέγεθος μικρογραφιών.

img.thumbs {
σύνορα: κανένα ·
πλάτος: 40px;
ύψος: 40px;
}

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

.slideshow {
ύψος: 408px;
μέγιστο ύψος: 408px.
}

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

img # τρέχον {
σύνορα: 1χλ.
φίλτρο: άλφα (αδιαφάνεια = 50).
-γλυκαντικό: 0.5;
αδιαφάνεια: 0,5;
}

Εδώ βλέπουμε κάποιον κώδικα για να χειριστεί ξανά τις διαφορές browser, τις τυπικές κλήσεις για τη χρήση ενός στοιχείου αδιαφάνειας, αλλά τα προγράμματα περιήγησης που βασίζονται σε IE και Mozilla δεν το υποστηρίζουν ακόμα.

Τέλος, άλλαξα το HTML για τις μικρογραφίες για να χρησιμοποιήσω τα στυλ και να καλέσω τη λειτουργία μου. Το HTML για το slideshow μου τώρα μοιάζει με αυτό:









Δεν έχουμε αλλάξει το JavaScript, επομένως το slide show εξακολουθεί να λειτουργεί, αλλά τώρα έχουμε περισσότερο styling και η παρουσίασή μας διαχωρίζεται από το HTML και το JavaScript. Ωστόσο, έχουμε ένα πρόβλημα, ενώ η αρχικά επιλεγμένη μικρογραφία είναι ημιδιαφανής με κόκκινο περίγραμμα, παραμένει έτσι όταν αλλάζουμε εικόνες. Για να διορθώσουμε αυτό, πρέπει να επιστρέψουμε στον παλιό μας φίλο JavaScript.

Μπορείτε να δείτε εδώ ένα παράδειγμα εργασίας του κώδικα.

Οδηγίες Βίντεο: Pac-Man με HTML5 και JS, part I, #17, live session (Ενδέχεται 2024).