Πώς να κάνω μια συνεχή εικόνα JavaScript Marquee

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

Αυτό το σενάριο έχει μερικούς περιορισμούς, ωστόσο:

• Οι εικόνες εμφανίζονται με το ίδιο μέγεθος (πλάτος και ύψος). Εάν οι εικόνες δεν είναι φυσικά το ίδιο μέγεθος, τότε όλες θα αλλάξουν το μέγεθος. Αυτό μπορεί να οδηγήσει σε κακή ποιότητα εικόνας, οπότε είναι καλύτερο να διαστασιοποιείτε σταθερά τις εικόνες πηγής σας.
• Το ύψος των εικόνων πρέπει να ταιριάζει με το ύψος που έχει οριστεί για το marquee, διαφορετικά, οι εικόνες θα αλλάξουν μεγέθους με το ίδιο δυναμικό για κακές εικόνες που αναφέρονται παραπάνω.
• Το πλάτος της εικόνας πολλαπλασιασμένο με τον αριθμό των εικόνων πρέπει να είναι μεγαλύτερο από το πλάτος του περιθωρίου. Η πιο εύκολη λύση για αυτό αν δεν υπάρχουν επαρκείς εικόνες είναι να επαναλάβετε τις εικόνες στον πίνακα για να γεμίσετε το κενό.
  instagram viewer
• Η μόνη αλληλεπίδραση που προσφέρει αυτό το σενάριο είναι η διακοπή του κυλίνδρου όταν το ποντίκι μετακινείται πάνω από το marquee και επαναλαμβάνεται όταν το ποντίκι απομακρύνεται από την εικόνα. Περιγράφουμε αργότερα μια τροποποίηση που μπορεί να γίνει για τη μετατροπή όλων των εικόνων σε συνδέσμους.
• Εάν έχετε πολλές σελίδες σε μια σελίδα, όλοι τρέχουν με την ίδια ταχύτητα, οπότε η τοποθέτηση σε οποιοδήποτε από αυτά θα τους αναγκάσει να σταματήσουν να κινούνται.
• Χρειάζεστε τις δικές σας εικόνες. Αυτοί που βρίσκονται στα παραδείγματα δεν αποτελούν μέρος αυτού του σεναρίου.

Ο πρώτος, αντιγράψτε τον παρακάτω JavaScript και αποθηκεύστε τον ως marquee.js.

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

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

Η συνάρτηση mqRotate πρέπει να ονομάζεται μετάβαση mqr μετά την οριοθέτηση των περιθωρίων που θα χειρίζονται τις περιστροφές.

var
mqAry1 = ['graphics / img0.gif', 'graphics / img1.gif', 'graphics / img2.gif', '
γραφικά / img3.gif ',' graphics / img4.gif ',' graphics / img5.gif ',' γραφικά /
img6.gif ',' graphics / img7.gif ',' graphics / img8.gif ',' graphics / img9.gif ',
'graphics / img10.gif', 'graphics / img11.gif', 'graphics / img12.gif', '
γραφικά / img13.gif ',' graphics / img14.gif '];

var
mqAry2 = ['graphics / img5.gif', 'graphics / img6.gif', 'graphics / img7.gif', '
γραφικά / img8.gif ',' graphics / img9.gif ',' graphics / img10.gif ',' γραφικά /
img11.gif ',' graphics / img12.gif ',' graphics / img13.gif ',' graphics / img14.
gif ',' graphics / img0.gif ',' graphics / img1.gif ',' graphics / img2.gif ','
γραφικά / img3.gif ',' graphics / img4.gif '];

λειτουργία εκκίνησης () {
νέα mq ('m1', mqAry1,60);
νέα mq ('m2', mqAry2,60); / / επαναλάβετε για όσες fuields απαιτείται
mqRotate (mqr); // πρέπει να έρθει τελευταία
}
window.onload = έναρξη;

// Συνεχής εικόνα
// copyright 24 Ιουλίου 2008 από τον Stephen Chapman
// http://javascript.about.com
// επιτρέπεται η χρήση αυτού του Javascript στην ιστοσελίδα σας
// με την προϋπόθεση ότι όλος ο κώδικας παρακάτω σε αυτό το σενάριο (συμπεριλαμβανομένων αυτών
// σχόλια) χρησιμοποιείται χωρίς καμία αλλαγή

var
mqr = []. λειτουργία
mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit =
this.mqo.style.height; this.mqo.onmouseout = συνάρτηση ()
{mqRotate (mqr)}}. this.mqo.onmouseover = συνάρτηση ()
{clearTimeout (mqr [0] .TO),}. this.mqo.ary = []; var maxw = ary.length;
για (var
i = 0 · ithis.mqo.ary [i] .src = ary [i]; this.mqo.ary [i] .style.position =
'απόλυτος'; αυτό.mqo.ary [i] .style.left = (wid * i) + 'px';
αυτό.mqo.ary [i] .style.width = wid + 'px'; this.mqo.ary [i] .style.height =
heit; this.mqo.appendChild (αυτό το.mqo.ary [i]);} mqr.push (αυτό.mqo);}
συνάρτηση mqRotate (mqr) {if (! mqr) επιστροφή; για (var j = mqr.length - 1; j
> -1; j -) {maxa = mqr [j]. μήκος κύματος. για (var i = 0 · imqr [j]. [i]. x.left = (parseInt (x.left, 10) -1) + 'px';} var y =
mqr [j] .ary [0] στυλ. αν (parseInt (y.left, 10) + parseInt (y.width, 10) <0)
{var z = mqr [j] .ary.shift (); z.style.left = (parseInt (z.style.left) +
parseInt (z.style.width) * maxa) + 'px'; mqr [j] .ar.push (z) ·}}
mqr [0] .TO = setTimeout ('mqRotate (mqr)', 10) ·}

Στη συνέχεια, προσθέστε τον ακόλουθο κώδικα στο κεφάλαιο της σελίδας σας:

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

Εδώ είναι ο κώδικας που χρησιμοποιήσαμε για αυτούς που εμφανίζονται στη σελίδα παραδειγμάτων:

.marquee {θέση: συγγενής;
υπερχείλιση: κρυφή;
πλάτος: 500px;
ύψος: 60px;
σύνορα: συμπαγές μαύρο 1px;
}

Μπορείτε να αλλάξετε οποιαδήποτε από αυτές τις ιδιότητες για το marquee σας. Ωστόσο, πρέπει να παραμείνει θέση: σχετική.

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

Το επόμενο βήμα είναι να ορίσετε ένα div στην ιστοσελίδα σας όπου θα τοποθετήσετε το marquee των εικόνων.

Το πρώτο από τα παραδείγματα περιπτέρων χρησιμοποίησε αυτόν τον κώδικα:

Η κλάση συνδέει αυτό με τον κώδικα στυλ φύλλων ενώ το id είναι αυτό που θα χρησιμοποιήσουμε στη νέα κλήση mq () για να επισυνάψουμε το marquee των εικόνων.

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

Ακολουθεί ένα από τα παραδείγματα παράδειγμα:

νέα mq ('m1', mqAry1,60);

• Το m1 είναι το αναγνωριστικό της ετικέτας div που θα εμφανίσει το marquee.
• Το mqAry1 είναι μια αναφορά σε μια σειρά εικόνων που θα εμφανίζονται στη μαρκίζα.
• Η τελική τιμή 60 είναι το πλάτος των εικόνων μας (οι εικόνες θα μετακινηθούν από δεξιά προς τα αριστερά και έτσι το ύψος είναι το ίδιο με αυτό που καθορίσαμε στο φύλλο στυλ).

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

Υπάρχουν μόνο δύο αλλαγές που πρέπει να κάνετε για να κάνετε τις εικόνες στο marquee σε συνδέσμους.

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

var mqAry1 = [
['graphics / img0.gif', 'blcmarquee1.htm'],
['γραφικά / img1.gif', 'blclockm1.htm'], ...
['graphics / img14.gif', 'bltypewriter.htm']].

Το δεύτερο πράγμα που πρέπει να κάνετε είναι να αντικαταστήσετε τα παρακάτω για το κύριο μέρος του σεναρίου:

// Συνεχής εικόνα Marquee με συνδέσμους
// copyright 21 Σεπτεμβρίου 2008 από τον Stephen Chapman
// http://javascript.about.com
// επιτρέπεται η χρήση αυτού του Javascript στην ιστοσελίδα σας
// με την προϋπόθεση ότι όλος ο κώδικας παρακάτω σε αυτό το σενάριο (συμπεριλαμβανομένων αυτών
// σχόλια) χρησιμοποιείται χωρίς καμία αλλαγή
var mqr = []. συνάρτηση mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit = this.mqo.style.height; αυτό.mqo.onmouseout = συνάρτηση () {mqRotate (mqr);}; αυτό.mqo.onmouseover = συνάρτηση () {clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = ary.length; για (var i = 0 · i -1; j -) {maxa = mqr [j]. μήκος κύματος. για (var i = 0 · i

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