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