Όσοι από εσάς γράφετε HTML για μεγάλο χρονικό διάστημα μπορεί να θυμάστε το στοιχείο. Αυτό ήταν ένα συγκεκριμένο στοιχείο προγράμματος περιήγησης που δημιούργησε ένα banner κύλισης κειμένου σε όλη την οθόνη. Αυτό το στοιχείο δεν προστέθηκε ποτέ στην προδιαγραφή HTML και η υποστήριξη για αυτό ποικίλλει ευρέως στα προγράμματα περιήγησης. Οι άνθρωποι συχνά είχαν πολύ ισχυρές απόψεις σχετικά με τη χρήση αυτού του στοιχείου – τόσο θετικό όσο και αρνητικό. Όμως, αν σας άρεσε ή το μισούσατε, εξυπηρετούσε το σκοπό να κάνει το περιεχόμενο που ξεχειλίζει τα όρια του κουτιού να είναι ορατά. Μέρος του λόγου που δεν εφαρμόστηκε ποτέ πλήρως από προγράμματα περιήγησης, εκτός από την ισχυρή προσωπική γνώμη, ήταν ότι θεωρείται οπτικό εφέ και ως εκ τούτου, δεν πρέπει να ορίζεται από τον HTML, ο οποίος ορίζει τη δομή. Αντίθετα, τα οπτικά ή τα εφέ παρουσίασης πρέπει να διαχειρίζονται το CSS Και το CSS3 προσθέτει την ενότητα marquee για να ελέγχει τον τρόπο με τον οποίο τα προγράμματα περιήγησης προσθέτουν το εφέ marquee σε στοιχεία.
Νέες ιδιότητες CSS3
Το CSS3 προσθέτει πέντε νέες ιδιότητες για να βοηθήσει στον έλεγχο του τρόπου εμφάνισης του περιεχομένου σας στο marquee: overflow-style, marquee-style, 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
overflow-style |
Κατεύθυνση γλώσσας | προς τα εμπρός | ΑΝΤΙΣΤΡΟΦΗ |
|---|---|---|---|
marquee-line |
ltr | αριστερά | σωστά |
| rtl | σωστά | αριστερά | |
marquee-block |
πάνω | κάτω |
marquee-speed
Αυτή η ιδιότητα καθορίζει πόσο γρήγορα το περιεχόμενο μετακινείται στην οθόνη. Οι τιμές είναι αργές, κανονικές και γρήγορες. Η πραγματική ταχύτητα εξαρτάται από το περιεχόμενο και το πρόγραμμα περιήγησης που το εμφανίζει, αλλά οι τιμές πρέπει να είναι αργές είναι πιο αργές από τις κανονικές που είναι πιο αργές από τις γρήγορες.
Υποστήριξη προγράμματος περιήγησης των Marquee Properties
Ίσως χρειαστεί να χρησιμοποιήσετε τα προθέματα προμηθευτή για να λειτουργήσουν τα στοιχεία marquee CSS. Έχουν ως εξής:
| CSS3 | Πρόθεμα προμηθευτή |
|---|---|
overflow-x: marquee-line; |
overflow-x: -webkit-marquee; |
marquee-style |
-webkit-marquee-style |
marquee-play-count |
-webkit-marquee-repetition |
marquee-direction: forward|reverse; |
-webkit-marquee-direction: forwards|backwards; |
marquee-speed |
-webkit-marquee-speed |
| κανένα ισοδύναμο | -webkit-marquee-increment |
Η τελευταία ιδιότητα σάς επιτρέπει να ορίσετε πόσο μεγάλα ή μικρά θα πρέπει να είναι τα βήματα καθώς το περιεχόμενο μετακινείται στην οθόνη στη σκηνή. Για να λειτουργήσει το marquee σας, θα πρέπει να τοποθετήσετε πρώτα τις προκαθορισμένες τιμές του προμηθευτή και, στη συνέχεια, να τις ακολουθήσετε με τις τιμές προδιαγραφών CSS3. Για παράδειγμα, εδώ είναι το CSS για μια σκηνή που μετακινεί το κείμενο πέντε φορές από αριστερά προς τα δεξιά μέσα σε ένα πλαίσιο 200×50. {
πλάτος: 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;
}
type = «code»>
Αναφέρετε αυτό το άρθρο
Μορφή mla apa chicago Η αναφορά σας
Kyrnin, Jennifer. «Δημιουργία περιεχομένου με δυνατότητα κύλισης σε HTML5 και CSS3 χωρίς MARQUEE.» ThoughtCo, Μάιος. 14, 2021, thinkco.com/scrollable-content-html5-css3-without-marquee-3467007.
Kyrnin, Jennifer. (2021, 14 Μαΐου). Δημιουργία περιεχομένου με δυνατότητα κύλισης σε HTML5 και CSS3 χωρίς MARQUEE. Ανακτήθηκε από το https://www.thoughtco.com/scrollable-content-html5-css3-without-marquee-3467007
Kyrnin, Jennifer. «Δημιουργία περιεχομένου με δυνατότητα κύλισης σε HTML5 και CSS3 χωρίς MARQUEE.» ThoughtCo. https://www.thoughtco.com/scrollable-content-html5-css3-without-marquee-3467007 (πρόσβαση στις 28 Μαΐου 2021).
αντιγραφή παραπομπής
-
Πώς να σχεδιάσετε IFrames με CSS
-
Τρόπος χρήσης του CSS για κεντράρισμα εικόνων και άλλων αντικειμένων HTML
-
Marquee στο Web Design
-
Τρόπος εισαγωγής γραμμών σε HTML με την ετικέτα HR
-
Κάντε τα στοιχεία της ιστοσελίδας να ξεθωριάζουν και να σβήνουν με CSS3
-
Πώς να τεντώσετε μια εικόνα φόντου για να ταιριάζει σε μια ιστοσελίδα
-
Τι είναι οι γλώσσες σήμανσης;
-
Η διαφορά μεταξύ CSS2 και CSS3
-
Πλαίσιο κύλισης HTML
-
Πώς να δημιουργήσετε μια διάταξη 3 στηλών στο CSS
-
Χρήση HTML5 για εμφάνιση βίντεο σε τρέχοντα προγράμματα περιήγησης
-
Χρήση χαρακτηριστικών στοιχείου HTML TABLE
-
Τι είναι ένα φύλλο στυλ χρήστη;
-
Πώς να επιπλέει μια εικόνα στα αριστερά του κειμένου σε μια ιστοσελίδα
-
HTML5 Canvas: Τι είναι και γιατί χρησιμοποιείται
-
Σπίτι
Ακολουθησε μας
-
Facebook
Facebook -
Πλακέτα
Πλακέτα
- Σχετικά με εμάς
- Διαφημίζω
- Πολιτική απορρήτου
- Πολιτική cookie
- Καριέρα
- Οδηγίες σύνταξης
- Επικοινωνία
- Οροι χρήσης
- Σημείωση απορρήτου της Καλιφόρνια
- Απόρρητο της ΕΕ
Τα δικαιώματα απορρήτου σας
Η ThoughtCo και οι τρίτοι συνεργάτες μας χρησιμοποιούν cookie και επεξεργάζονται προσωπικά δεδομένα, όπως μοναδικά αναγνωριστικά, βάσει της συγκατάθεσής σας για αποθήκευση ή / και πρόσβαση σε πληροφορίες σε μια συσκευή, εμφάνιση εξατομικευμένων διαφημίσεων και για μέτρηση περιεχομένου, πληροφορίες κοινού και ανάπτυξη προϊόντων. Για να αλλάξετε ή να ανακαλέσετε τις επιλογές συγκατάθεσής σας για το ThoughtCo.com, συμπεριλαμβανομένου του δικαιώματός σας να αντιταχθείτε όταν χρησιμοποιείται έννομο συμφέρον, κάντε κλικ παρακάτω Ανά πάσα στιγμή, μπορείτε να ενημερώσετε τις ρυθμίσεις σας μέσω του συνδέσμου «Απόρρητο ΕΕ» στο κάτω μέρος οποιασδήποτε σελίδας. Αυτές οι επιλογές θα σηματοδοτηθούν παγκοσμίως στους συνεργάτες μας και δεν θα επηρεάσουν τα δεδομένα περιήγησης. Λίστα Συνεργατών (προμηθευτών)
Εμείς και οι συνεργάτες μας επεξεργαζόμαστε δεδομένα για:
Ενεργά σαρώστε τα χαρακτηριστικά της συσκευής για αναγνώριση. Χρησιμοποιήστε ακριβή δεδομένα γεωγραφικής τοποθεσίας. Αποθηκεύστε ή / και αποκτήστε πρόσβαση σε πληροφορίες σε μια συσκευή. Επιλέξτε εξατομικευμένο περιεχόμενο. Δημιουργήστε ένα εξατομικευμένο προφίλ περιεχομένου. Μετρήστε την απόδοση των διαφημίσεων. Επιλέξτε βασικές διαφημίσεις. Δημιουργήστε ένα εξατομικευμένο προφίλ διαφημίσεων. Επιλέξτε εξατομικευμένες διαφημίσεις. Εφαρμόστε έρευνα αγοράς για να δημιουργήσετε πληροφορίες κοινού. Μετρήστε την απόδοση περιεχομένου. Ανάπτυξη και βελτίωση προϊόντων. Λίστα Συνεργατών (προμηθευτών)
-