Αδιαφάνεια Επιδράσεις σε MooTools

Υπάρχουν πολλές διαφορετικές τεχνολογίες που είναι διαθέσιμες για το σχεδιασμό μιας ιστοσελίδας . Ένα στοιχείο στυλ που χρησιμοποιείται σε όλη την Web είναι η χρήση της διαφάνειας, η οποία ελέγχεται με ρύθμιση αδιαφάνειας ενός στοιχείου . Ένας προγραμματιστής μπορεί να επιτευχθεί αυτό το αποτέλεσμα όμως μια ποικιλία διαφορετικών μέσων, συμπεριλαμβανομένης της χρήσης του πλαισίου MooTools . MooTools
Η

MooTools είναι ένα πλαίσιο JavaScript . JavaScript είναι η κύρια γλώσσα προγραμματισμού του Web ? Είναι ικανή να δημιουργήσει σύνθετες κινήσεις ή απλές λειτουργίες Web . Ο στόχος του MooTools είναι να δημιουργηθεί ένα απλοποιημένο τρόπο για τους προγραμματιστές να χρησιμοποιούν JavaScript . Ισχυρίζεται να μειώσει το ποσό του κωδικού ένας προγραμματιστής θα γράψει , να επιτρέψει την ευκολότερη συμβατότητα cross-browser και να παρέχει ένα ελαφρύ, αξιόπιστο πλαίσιο .
Εικόνων Αδιαφάνεια Χρήσεις
Η

Όταν ρυθμίστε την αδιαφάνεια ενός στοιχείου μπορείτε να ελέγξετε τη συνολική διαφάνεια του . Αυτό μπορεί να χρησιμοποιηθεί σε μια ποικιλία από διαφορετικούς τρόπους? Ένας προγραμματιστής μπορεί να θέλει να μειώσει την αδιαφάνεια μιας εικόνας , η αύξηση της διαφάνειας του, προκειμένου να δημιουργηθεί μια πιο κατάλληλη εικόνα φόντου . Μπορείτε επίσης να ρυθμίσετε την αδιαφάνεια μιας εικόνας με βάση τις δράσεις του χρήστη ? Για παράδειγμα , αν ένας χρήστης τοποθετεί τον κέρσορα του πάνω από μια εικόνα , μπορείτε να μειώσετε την αδιαφάνεια της εικόνας , προκειμένου να δηλώσουν ότι έχει επιλεγεί . Η διαφάνεια μπορεί επίσης να χρησιμοποιηθεί ως ένα στοιχείο στυλ . Παρέχοντας μια ποικιλία από επίπεδα αδιαφάνειας σε μια ιστοσελίδα μπορεί να ενισχύσει το βάθος και την αίσθηση του τελικού προϊόντος .
Εικόνων Απλές Αδιαφάνεια Effect
Η

MooTools σχεδιάστηκε για να μειώσει η ποσότητα του κώδικα που απαιτείται για να παράγει αποτελέσματα JavaScript , και μπορείτε να αλλάξετε την αδιαφάνεια για οποιαδήποτε εικόνα σε μια ιστοσελίδα με τη χρήση της βιβλιοθήκης του MooTool του . Με τη δημιουργία ενός « τάξη» και χρησιμοποιώντας τη μέθοδο " σετ " μπορείτε να αναφέρετε διαφορετικά επίπεδα της αδιαφάνειας , το οποίο μπορεί στη συνέχεια να χρησιμοποιηθεί απλώς τον καθορισμό της κατηγορίας μέσα στην ετικέτα εικόνας HTML σας . Ένα παράδειγμα του κώδικα MooTools είναι οι παρακάτω:

window.addEvent ( « domready » , λειτουργία () {

$ $ ( « αδιαφάνεια ». ) Η κάθε μία ( λειτουργία ( MyEl ) { <. br >

MyEl.set ( « αδιαφάνεια » , + MyEl.get ( « rel ') '. ' ) ?

} ) ?

} ) ?

στο παραπάνω παράδειγμα, έχετε δημιουργήσει μια κατηγορία « αδιαφάνεια » και δήλωσε ότι η διαφάνεια της εικόνας θα αλλάξει όταν θα ρυθμίσετε το εικόνων " rel " ετικέτα . Με την τοποθέτηση " window.addEvent ( « domready » , λειτουργία () { " στον κώδικα καθοδηγείτε τη λειτουργία τίτλο " MyEl " στη φωτιά όταν η σελίδα φορτώνει HTML . Αυτό θα εξασφαλίσει ότι η αλλαγή της αδιαφάνειας γίνεται το συντομότερο ο επισκέπτης φτάνει στο δικτυακό σας τόπο προκειμένου να εφαρμόσει η αλλαγή αδιαφάνεια προσθέστε την ακόλουθη γραμμή κώδικα HTML : .

υποκατάστατο » myImg.jpg » με το αρχείο εικόνας . Σε αυτό το παράδειγμα " myImg.jpg " έχει αδιαφάνεια του 50 τοις εκατό .
εικόνων αδιαφάνεια Animation
Η

Ένας τρόπος για να ενισχυθεί η διαφάνεια αποτέλεσμα είναι να το εμψυχώσει . Χρησιμοποιώντας MooTools μπορείτε να ρυθμίσετε την αδιαφάνεια μιας εικόνας με βάση το πώς ο χρήστης αλληλεπιδρά με ένα αντικείμενο . συμβάντα ποντικιού είναι ο πιο κοινός τύπος της αλληλεπίδρασης . Χρησιμοποιώντας MooTools , μπορείτε να δείξετε ότι θα θέλατε την αδιαφάνεια ορίζεται σε ένα επίπεδο για την « mouseEnter " ( όταν οι μούσες του χρήστη πάνω από ένα αντικείμενο ) και ένα άλλο επίπεδο για " MouseLeave » ( όταν ο δείκτης απομακρύνεται από το αντικείμενο ) . Αυτός ο τύπος της λειτουργίας εφαρμόζεται με παρόμοιο τρόπο σε μια απλή αλλαγή αδιαφάνεια ? . να δημιουργήσει ένα « τάξη» και να καλέσει αυτή την κατηγορία στον κώδικα HTML Η συνάρτηση χρησιμοποιεί στη συνέχεια τα γεγονότα του ποντικιού , ώστε να αλλάξει την αδιαφάνεια της εικόνας

(function ( $ ) {
<. p> window.addEvent ( « domready » , λειτουργία () {

αδιαφάνεια var = 0,6 , toOpacity = 0.8 ? .

$ $ ( ' div.opacity » ) σύνολο ( « αδιαφάνεια » . , αδιαφάνεια ) addEvents ( {

mouseEnter : λειτουργία ( ) {

this.tween ( « αδιαφάνεια » , toOpacity ) ?

} , πώληση

η λειτουργία αυτή δείχνει ότι το παράθυρο πρέπει να αλλάξει σε επίπεδο αδιαφάνειας των " 0.8 " ή 80 τοις εκατό, όταν το ποντίκι μπαίνει από το παράθυρο . Όπως και το πρώτο παράδειγμα ( τμήμα 3 ) , η αρχική λειτουργία είναι ρυθμισμένη για να φορτώσει μόλις ανοίξει το παράθυρο του browser , η οποία υποδεικνύεται από το " domready . " Η λειτουργία " mouseEnter " καθοδηγεί οποιαδήποτε εικόνα σε μια τάξη με « αδιαφάνεια » για να αλλάξει από « αδιαφάνεια » σε « toOpacity . " Οι τιμές για αυτές τις μεταβλητές που στην τρίτη γραμμή του κώδικα . με τη ρύθμιση αυτών αριθμοί θα ρυθμίσετε το επίπεδο λειτουργιών αδιαφάνειας , όταν μπαίνει το ποντίκι ή αφήνει την εικόνα .
Η
εικόνων