Όσοι από εσάς γράφετε HTML για μεγάλο χρονικό διάστημα μπορεί να θυμάστε το στοιχείο. Αυτό ήταν ένα συγκεκριμένο στοιχείο προγράμματος περιήγησης που δημιούργησε ένα banner κύλισης κειμένου σε όλη την οθόνη. Αυτό το στοιχείο δεν προστέθηκε ποτέ στο HTML προδιαγραφές και υποστήριξη για αυτό ποικίλλει ευρέως μεταξύ των προγραμμάτων περιήγησης. Οι άνθρωποι συχνά είχαν πολύ ισχυρές απόψεις σχετικά με τη χρήση αυτού του στοιχείου - τόσο θετικό όσο και αρνητικό. Αλλά αν το αγαπήσατε ή το μισούσατε, εξυπηρετούσε το σκοπό να κάνει το περιεχόμενο που ξεχειλίζει τα όρια του κουτιού ορατά.
Μέρος του λόγου που δεν εφαρμόστηκε ποτέ πλήρως από προγράμματα περιήγησης, εκτός από την έντονη προσωπική γνώμη, ήταν αυτός Θεωρείται οπτικό εφέ και ως εκ τούτου, δεν πρέπει να ορίζεται από το HTML, το οποίο ορίζει το δομή. Αντίθετα, τα οπτικά ή τα εφέ παρουσίασης πρέπει να διαχειρίζονται το CSS. Και το CSS3 προσθέτει τη λειτουργική μονάδα για τον έλεγχο του τρόπου με τον οποίο τα προγράμματα περιήγησης προσθέτουν το εφέ μαρκα στα στοιχεία.
Νέες ιδιότητες CSS3
Το CSS3 προσθέτει πέντε νέες ιδιότητες για να ελέγξετε τον τρόπο εμφάνισης του περιεχομένου σας στο marquee: στυλ υπερχείλισης, στυλ marquee, marquee-play-count, marquee-direction και marquee-speed.
στυλ υπερχείλισης
Η ιδιότητα τύπου υπερχείλισης (την οποία συζητήσαμε επίσης στο άρθρο CSS Overflow) καθορίζει το προτιμώμενο στυλ για περιεχόμενο που ξεχειλίζει από το πλαίσιο περιεχομένου. Εάν ορίσετε την τιμή σε marquee-line ή marquee-block το περιεχόμενό σας θα μετακινηθεί προς τα μέσα και προς τα αριστερά / δεξιά (marquee-line) ή πάνω / κάτω (marquee-block).
σε στιλ μαρκέ
Αυτή η ιδιότητα καθορίζει τον τρόπο μετακίνησης του περιεχομένου (και έξω). Οι επιλογές είναι πάπυρος, διαφάνεια και εναλλαγή. Η κύλιση ξεκινά με το περιεχόμενο εντελώς εκτός οθόνης και, στη συνέχεια, μετακινείται σε ολόκληρη την ορατή περιοχή έως ότου ξαναγίνει τελείως εκτός οθόνης. Η διαφάνεια ξεκινά με το περιεχόμενο εντελώς εκτός οθόνης και στη συνέχεια κινείται απέναντι έως ότου το περιεχόμενο μετακινηθεί πλήρως στην οθόνη και δεν υπάρχει άλλο περιεχόμενο για να γλιστρήσει στην οθόνη. Τέλος, η εναλλακτική αναπήδηση του περιεχομένου από πλευρά σε πλευρά, ολισθαίνοντας εμπρός και πίσω.
marquee-play-count
Ένα από τα μειονεκτήματα της χρήσης του στοιχείου MARQUEE είναι ότι η σκηνή δεν σταματά ποτέ. Αλλά με το στυλ ιδιοκτησίας marquee-play-count μπορείτε να ρυθμίσετε το marquee να περιστρέφει και να απενεργοποιεί το περιεχόμενο για συγκεκριμένες φορές.
σκηνοθεσία
Μπορείτε επίσης να επιλέξετε την κατεύθυνση με την οποία το περιεχόμενο πρέπει να μετακινηθεί στην οθόνη. Οι τιμές προς τα εμπρός και προς τα πίσω βασίζονται στην κατεύθυνση του κειμένου όταν το στυλ υπερχείλισης είναι γραμμή marquee και πάνω ή κάτω όταν το στυλ υπερχείλισης είναι μπλοκ marquee.
Λεπτομέρειες κατεύθυνσης Marquee
στυλ υπερχείλισης |
Κατεύθυνση γλώσσας | προς τα εμπρός | ΑΝΤΙΣΤΡΟΦΗ |
|---|---|---|---|
marquee-line |
ltr | αριστερά | σωστά |
| rtl | σωστά | αριστερά | |
μπλοκ marquee |
πάνω | κάτω |
marquee-speed
Αυτή η ιδιότητα καθορίζει πόσο γρήγορα το περιεχόμενο μετακινείται στην οθόνη. Οι τιμές είναι αργές, κανονικές και γρήγορες. Η πραγματική ταχύτητα εξαρτάται από το περιεχόμενο και το πρόγραμμα περιήγησης που το εμφανίζει, αλλά οι τιμές πρέπει να είναι αργές είναι πιο αργές από τις κανονικές που είναι πιο αργές από τις γρήγορες.
Υποστήριξη προγράμματος περιήγησης των Marquee Properties
Ίσως χρειαστεί να χρησιμοποιήσετε προθέματα προμηθευτή για να λειτουργήσουν τα στοιχεία μαρκαρίσματος CSS. Έχουν ως εξής:
| CSS3 | Πρόθεμα προμηθευτή |
|---|---|
overflow-x: marquee-line; |
overflow-x: -webkit-marquee; |
σε στιλ μαρκέ |
- στιλ webkit-marquee |
marquee-play-count |
-webkit-marquee-επανάληψη |
marquee-direction: εμπρός | αντίστροφη; |
-webkit-marquee-direction: προς τα εμπρός | προς τα πίσω · |
marquee-speed |
-webkit-marquee-speed |
| κανένα ισοδύναμο | -webkit-marquee-αύξηση |
Η τελευταία ιδιότητα σάς επιτρέπει να ορίσετε πόσο μεγάλα ή μικρά θα πρέπει να είναι τα βήματα καθώς το περιεχόμενο μετακινείται στην οθόνη στη σκηνή.
Για να λειτουργήσει το marquee σας, θα πρέπει να τοποθετήσετε πρώτα τις προκαθορισμένες τιμές του προμηθευτή και, στη συνέχεια, να τις ακολουθήσετε με τις τιμές προδιαγραφών CSS3. Για παράδειγμα, εδώ είναι το CSS για μια σκηνή που μετακινεί το κείμενο πέντε φορές από αριστερά προς τα δεξιά μέσα σε ένα πλαίσιο 200x50.
{
πλάτος: 200px; ύψος: 50px; white-space: nowrap;
υπερχείλιση: κρυφό;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: προς τα εμπρός;
-webkit-marquee-style: κύλιση;
-webkit-marquee-speed: κανονική;
-webkit-marquee-increment: μικρό;
-webkit-marquee-επανάληψη: 5;
overflow-x: marquee-line;
σκηνοθεσία: εμπρός;
marquee-style: κύλιση;
marquee-speed: κανονικό;
marquee-play-count: 5;
}