Ομαλή αλλαγή χρώματος φόντου. Πώς να αλλάξετε το χρώμα φόντου: μετά την ψευδομάθηση με το jQuery; Το Jquery αλλάζει χρώμα
Σε αυτό το μάθημα θα μιλήσουμε για το αποτέλεσμα κατά το οποίο το φόντο ενός αντικειμένου αλλάζει ομαλά ως αποτέλεσμα της αιώρησης του δρομέα του ποντικιού πάνω του.
Πρώτον, όπως πιθανότατα έχετε ήδη συνηθίσει (αν δεν είναι η πρώτη φορά που χρησιμοποιείτε τη βιβλιοθήκη jQuery), συνδέουμε το jQuery στον ιστότοπό μας.
Εκτός από το ίδιο το jQuery, χρειαζόμαστε επίσης jQuery UI.
Εάν είστε εξοικειωμένοι με τις αρχές του jQuery, θα πρέπει να θυμάστε ότι στην κεφαλίδα πρέπει να τοποθετήσουμε τον κωδικό κλήσης, σε αυτήν την περίπτωση, το κινούμενο σχέδιο αλλαγής χρώματος, ώστε να φορτώνει πριν φορτωθεί το κύριο περιεχόμενο της σελίδας. $(document).ready(function() ( // βάλτε τον κωδικό κλήσης της κινούμενης εικόνας εδώ ));
HTMLΑκολουθεί ένα παράδειγμα σήμανσης html.
Αλλαγή του χρώματος φόντου ενός στοιχείου Κινούμενη εικόνα αλλαγής χρωμάτων στο hover / παιχνίδια υπολογιστή / Portal 2 
Πύλη 2
Το πρωτότυπο Portal είναι ήδη ένα καλτ πράγμα και απροσδόκητο για την εποχή του. Μόνο για άλλη μια φορά επιβεβαιώνει τη δοκιμασμένη στο χρόνο διατριβή για τον θρίαμβο των ιδεών έναντι των προηγμένων τεχνολογιών.
CSSΤα στυλ CSS για τη σελίδα μας μοιάζουν με αυτό.
Png); text-align:left; χρώμα:#333; πλάτος: 800 px; μέγεθος γραμματοσειράς: 14 px; font-family:georgia, "time new romances", serif; περιθώριο: 0 αυτόματο; padding:0; ) a( color:#333; text-decoration:none ) a:focus ( outline: none; ) h1 (font-size: 34px; font-family: verdana, helvetica, arial, sans-serif; διάστιχο:- 2 px; χρώμα:#394BEA; βάρος γραμματοσειράς: 700; padding: 20 px 0 0; text-shadow: 0 1px 1px #70C5ED; ) h2 (μέγεθος γραμματοσειράς: 24 px; οικογένεια γραμματοσειράς: verdana, helvetica-sans, arial σερίφ; χρώμα:#5C81CB; βάρος γραμματοσειράς: 400; padding: 0 0 10 px; text-shadow:0 1px 1px #70C5ED; ) h3, h3 a (μέγεθος γραμματοσειράς: 14 px; γραμματοσειρά οικογένειας: verdana, arial , sans-serif, διάστιχο: -1 εικονοστοιχεία, χρώμα:#333, βάρος γραμματοσειράς: 700, μετατροπή κειμένου: κεφαλαία, περιθώριο: 0, συμπλήρωση: 8 εικονοστοιχεία 0 8 εικονοστοιχεία 0; ) p ( χρώμα:#333, αιώρηση: αριστερά; ύψος γραμμής: 22 εικονοστοιχεία, περιθώριο: 5 εικονοστοιχεία, συμπλήρωση: 0 0 10 εικονοστοιχεία; ) #container ( περιθώριο: 0; padding: 0; ) .boxes ( φόντο:#fff; περίγραμμα: 1px συμπαγές #ccc; float:αριστερά; padding:10px; position:relative; πλάτος:600px; ) img ( περίγραμμα:5px συμπαγές #CCCCCC; ) div.info ( border-bottom:1px solid #CCCCCC; float:αριστερά; περιθώριο:0; padding:0; πλάτος: 100%; ) .block ( χρώμα:#0066CC; float:αριστερά; υπερχείλιση:κρυφό; θέση:συγγενής; πλάτος: 600 px; ) .block h4, .block h4 a (χρώμα:#333333; μέγεθος γραμματοσειράς: 11 px; padding: 5 px 0; text-shadow:0 1px 1px #CEDEFD; μετατροπή κειμένου: κεφαλαία; )
JSΈνα στοιχείο DIV με την κλάση .boxes είναι το στοιχείο, το μπλοκ, του οποίου το χρώμα θέλουμε να αλλάξουμε.
Αυτός είναι ο κωδικός που θα καλέσουμε στην κεφαλίδα.
$(document).ready(function())( $(".boxes").hover(function() ( $(this).stop().animate(( backgroundColor: "#40B8FE"), 800); ) , function() ( $(this).stop().animate(( backgroundColor: "#ffffff" ), 800); )); )); Οι παράμετροι backgroundColor ορίζουν το χρώμα και η τιμή 800 είναι η ταχύτητα κίνησης.
Υπάρχει ένα επίπεδο με κείμενο και ένα κουμπί, όταν κάνετε κλικ σε αυτό, πρέπει να αλλάξετε το χρώμα του κειμένου σε αυτό το επίπεδο.
Αλλαγή χρώματος (jQuery) $(document).ready(function())( $("#color_change").click(function())( $("#layer").css("color", "#F00" ))) )); #layer (border:#CCC 1px solid; line-height:1,5; padding:10px 20px; width:800px; margin-top:20px;) Αλλά για να καταλάβετε από πού προέρχεται αυτή η λανθασμένη αντίληψη των ανθρώπων που καταδικάζουν την ευχαρίστηση και επαινούν τον πόνο , θα σας αποκαλύψω ολόκληρη την εικόνα και θα σας εξηγήσω τι ακριβώς είπε αυτός ο άνθρωπος που ανακάλυψε την αλήθεια, τον οποίο θα αποκαλούσα αρχιτέκτονα μιας ευτυχισμένης ζωής. Πράγματι, κανείς δεν απορρίπτει, δεν περιφρονεί ή αποφεύγει τις απολαύσεις μόνο και μόνο επειδή είναι απολαύσεις, αλλά μόνο επειδή εκείνοι που δεν ξέρουν πώς να επιδίδονται λογικά στις απολαύσεις υποφέρουν πολύ. Ακριβώς όπως δεν υπάρχει κανείς που θα αγαπούσε, θα προτιμούσε και θα λαχταρούσε το ίδιο το βάσανο μόνο επειδή υποφέρει, και όχι επειδή μερικές φορές προκύπτουν περιστάσεις όταν ο πόνος και ο πόνος φέρνουν κάποια σημαντική ευχαρίστηση. Για να χρησιμοποιήσω ένα απλό παράδειγμα, ποιος από εμάς θα ασχολούνταν με κάθε είδους επίπονη σωματική άσκηση αν δεν είχε κάποιο όφελος; Και ποιος θα μπορούσε δίκαια να κατηγορήσει κάποιον που αγωνίζεται για ευχαρίστηση που δεν θα έφερνε μαζί του κανένα πρόβλημα ή κάποιον που θα απέφευγε πόνο που δεν θα έφερνε μαζί του καμία ευχαρίστηση;
Σήμερα θα μάθουμε πώς να κάνουμε μια ομαλή αλλαγή στο χρώμα ενός μπλοκ χρησιμοποιώντας CSS και JQuery. Με αυτό το πρόσθετο μπορείτε να επιτύχετε εκπληκτικά όμορφα σχεδιαστικά αποτελέσματα. Για παράδειγμα, μπορείτε να φτιάξετε ένα δροσερό μενού που θα αλλάζει ομαλά χρώμα όταν τοποθετείτε το δείκτη του ποντικιού πάνω, και πιστέψτε με, φαίνεται πολύ όμορφο.
JQueryΑρχικά, μεταξύ των ετικετών και πρέπει να βάλετε τα εξής:
Στη συνέχεια, πάλι μεταξύ των ετικετών, αντιγράφουμε αυτό το σενάριο:
$(document).ready(function())( $(".Box").hover(function() ( $(this).stop().animate(( backgroundColor: "#FF4500"), 400); ) , function() ( $(this).stop().animate(( backgroundColor: "#ffffff" ), 400); )); ));
Όπου .Box είναι η κλάση μπλοκ που καταλήξαμε παραπάνω στο CSS.
"#FF4500" - χρώμα αιώρησης. 400 — ταχύτητα κίνησης κατά την αιώρηση.
Το "#ffffff" είναι το αρχικό χρώμα μετά την απομάκρυνση του δρομέα. 400 — ταχύτητα κίνησης όταν απομακρύνετε τον κέρσορα.
HTMLΑφού κάνετε τα πάντα όπως γράφτηκε παραπάνω, το χρώμα του μπλοκ θα αλλάξει σταδιακά. Για να εισαγάγετε ένα τέτοιο μπλοκ στη σελίδα, πρέπει απλώς να προσθέσετε τα ακόλουθα στη σωστή θέση:
Και το μπλοκ θα εμφανιστεί.
ΣπουδαίοςΑυτό το plugin μπορεί να αλλάξει μόνο το χρώμα φόντου. Για παράδειγμα, δεν θα μπορείτε να το επισυνάψετε σε συνδέσμους ή κείμενο. Ένα άλλο plugin αλλάζει το χρώμα των συνδέσμων (σίγουρα θα γράψω πώς να το κάνω σύντομα).
Εάν θέλετε να κάνετε τα μπλοκ στη σελίδα να έχουν διαφορετικά χρώματα, όπως το δικό μου, θα χρειαστεί να τοποθετήσετε πολλά σενάρια στη σειρά μεταξύ των ετικετών και, κατά συνέπεια, μην ξεχάσετε να αλλάξετε το χρώμα στο επιθυμητό. Το πιο σημαντικό πράγμα είναι να αλλάξετε την κλάση, για παράδειγμα στο παραπάνω παράδειγμά μας - την κλάση Box, και το επόμενο σενάριο θα πρέπει να είναι με διαφορετική κλάση, για παράδειγμα Box1, μετά Box2 και ούτω καθεξής.
Αυτό είναι όλο, αγαπητοί φίλοι. Εάν δεν καταλαβαίνετε τίποτα, φροντίστε να ρωτήσετε στα σχόλια. Τα λέμε σύντομα.
Κάπως, όταν αντιμετώπισα την ανάγκη να γράψω το εφέ του κειμένου που ρέει από το ένα χρώμα στο άλλο, ανακάλυψα απροσδόκητα μόνος μου ότι αυτό δεν είναι τόσο ασήμαντο έργο.
Μπορείτε να αφήσετε ένα σημάδι ελέγχου μόνο αντίθετα από τα εφέ πυρήνα. Είναι αυτή η ενότητα που επεκτείνει τη μέθοδο jQuery.Animate () που χρειαζόμαστε. Απλά πρέπει να συνδέσετε τη λήψη συναρμολόγησης:
Μετά από αυτό, το χρώμα του κειμένου, του πλαισίου ή του φόντου οποιουδήποτε στοιχείου σελίδας είναι διαθέσιμο για κινούμενα σχέδια.
Βήμα 2. Καθυστέρηση μεταξύ των κινούμενων εικόνων στοιχείων.Τώρα που όλα είναι εντάξει με το κινούμενο σχέδιο, υπάρχει ένα δεύτερο χαρακτηριστικό που περιπλέκει την εργασία - να προσθέσετε μια καθυστέρηση μεταξύ της κίνησης των στοιχείων συλλογής.
Ας υποθέσουμε ότι έχουμε μια συλλογή από αριθμημένα στοιχεία λίστας:
Var $elements = $("ol > li");
Η κίνηση κάθε επόμενου στοιχείου της συλλογής θα πρέπει να ξεκινά με μια ορισμένη καθυστέρηση μετά το προηγούμενο.
Μπορείτε να επιτύχετε το επιθυμητό αποτέλεσμα χρησιμοποιώντας τον ακόλουθο κώδικα:
Για (var i = 0; i
Σημειώστε ότι η setTimeout() λαμβάνει ως πρώτη της παράμετρο μια συνάρτηση που επιστρέφει μια άλλη συνάρτηση.
Αν δεν γίνει αυτό, τότε η μεταβλητή i θα περάσει με αναφορά και όταν έρθει ο χρόνος εκτέλεσης της συνάρτησης χρονοδιακόπτη, θα έχω την τελευταία της τιμή ίση με $elements.length , αφού μέχρι αυτή τη στιγμή θα έχει τελειώσει ο βρόχος for και η κίνηση δεν θα εκτελεστεί καθόλου.
Χρησιμοποιώντας μια ένθετη συνάρτηση, αντιγράφουμε την τιμή του i σε κάθε επανάληψη του βρόχου, με τη βοήθεια του οποίου επιτυγχάνουμε σωστή λειτουργίασχεδιασμένος.
συμπεράσματαΜπορείτε να χρησιμοποιήσετε τέτοια κινούμενα σχέδια, για παράδειγμα, για να δείξετε ότι σε κάποια λίστα παραμέτρων πρέπει να επιλέξετε τουλάχιστον μία ή απλώς για να τραβήξετε την προσοχή σε κάποιο τμήμα της σελίδας.
