1. Methode 1
1. Verwenden Sie Bilder
2. Struktur und Stil
<! DocType html> <html lang = "en"> <kopf> <meta charset = "utf-8"> <title> document </title> <style> ul {padding-linft: 0; Überlauf: versteckt; } ul li {float: links; Listenstil: Keine; Breite: 27px; Höhe: 27px; Hintergrund: URL (img/star.gif)} ul li a {display: block; Breite: 100%; Padding-Top: 27px; Überlauf: versteckt; } ul li.light {Hintergrundposition: 0 -29px; } </style> </head> <body> <ul> <li> <a href = "javaScript:;"> 1 </a> </li> <li> <a href = "javascript:; href = "javaScript:;"> 4 </a> </li> <li> <a href = "javaScript:;"> 5 </a> </li> </ul> </body> </html>Wenn die Lichtklasse hinzugefügt wird, wird sie zu einem hellen Stern, was bedeutet, die Hintergrundposition zu ändern und den hohlen Stern in eine feste zu verwandeln. Wenn der JS implementiert ist, soll dem Li einen Lichtklassennamen hinzufügen.
Wirkung:
3. Interaktion JS
<Script> var num = FinalNum = tempnum = 0; var lis = document.getElementsByTagName ("li"); // num: Die Anzahl der beleuchteten Sterne, die in // Finalnum: Anzahl der endgültigen beleuchteten Sterne übergeben wurden // tempnum: eine Zwischenwertfunktion fnshow (num) {Finalnum = num || tempnum; // Wenn die Num in IS 0 ist, nimmt Finalnum den Wert von tempnum für (var i = 0; i <lis.Length; i ++) {lis [i] .className = i <Finalnum? "Licht": ""; // Die Sterne beleuchten, ist der Stil des Hinzufügens von Klasse zu Licht}} für (var i = 1; i <= lis.Length; i ++) {lis [i - 1] .Index = i; lis [i - 1] .onmouseover = function () {// Die Maus geht vorbei und leuchtet die Sterne auf. fnshow (this.index); // Der in übergebene Wert ist positiv, dh finalnum} lis [i - 1] .onmouseout = function () {// Die Sterne verdunkeln, wenn die Maus fnshow (0); // Der Wert, den in IS 0, Finalnum ist, tempnum, der initiale 0} lis [i - 1]. wird aufgerufen, und der tempnum -Wert wird geändert, um die Sterne tempnum = this.index zu beleuchten; }} </script>Ein wichtiger Punkt dieses Designs ist, dass beim Mouout ein Wert gespeichert wird, um die Sterne dunkel zu machen. Der Anfang ist 0 (0 Sterne werden heller, was bedeutet, dass er völlig dunkel ist). Wenn Sie nicht klicken, solange die Maus blättert, sind alle Sterne dunkel. Das Click -Ereignis löst einen Mausover und einen Mausout aus. Ändern Sie daher beim Klicken das Tempnum, um festzustellen, wie viele Sterne hell sind, wenn die Maus geht. Dieser Wert wird bis zum nächsten Klicken beibehalten.
Endgültiger Effekt:
2. Methode 2
1. Verwenden Sie Bilder
2. Der Effekt ist wie folgt
3. Der vollständige Code ist wie folgt
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> Demo von Stern </title> <style> ul {padding: 0; Margin: 0;} li {Listenstil: keine;}/*stars bewertet*/. .scoremark .score {float: rechts; Anzeige: Block; Rand: 0 0 0 10px; Schriftgröße: 18px; Zeilenhöhe: 22px; Schriftgewicht: fett; Farbe: #F70; } .scoremark .star {float: rechts; Anzeige: Block; Position: Relativ; Breite: 116px; Höhe: 20px; Hintergrund: URL (IMG/STAR.PNG) NO -Repeat 0px -20px; } .scoremark .YSTAR {Position: absolut; Top: 0; links: 0; Breite: 116px; Höhe: 20px; Hintergrund: URL (IMG/STAR.PNG) NO-Repeat 0px 0px; } .scoremark .star ul {width: 120px; Höhe: 20px; Position: absolut; Top: 0; links: 0; } .scoremark .star ul: hover {Hintergrund: url (img/star.png) no -repeat 0px -20px; } .scoremark .star li {float: links; Breite: 24px; Höhe: 20px; } .scoremark .star li a {display: block; Breite: 24px; Höhe: 20px; Überlauf: versteckt; Text -Indent: -9999px; Position: absolut; Z-Index: 5; } .scoremark .star li a: hover {Hintergrund: url (img/star.png) no-repeat 0px 0px; Z-Index: 3; links: 0} .scoremark .star A.one-star {links: 0; } .scoremark .star A.one-star: hover {width: 24px} .scoremark .star a.two stars {links: 24px; } .scoremark .star a.two stars: hover {width: 48px} .scoremark .star A.Three-Stars {links: 48px; } .scoremark .star A.Three-Stars: Hover {Breite: 72px} .scoremark .star A.-four-Stars {links: 72px; } .scoremark .star a.four-stars: hover {width: 96px} .scoremark .star A.Five-Stars {links: 96px; } .scoremark .star A.Five-Stars: Hover {Breite: 120px; } .scoremark .tips {Position: absolut; Oben: -28px; links: 0; Breite: 40px; Höhe: 21px; Farbe: #333; Zeilenhöhe: 20px; Polsterung: 0 0 5px 0; Text-Align: Mitte; Hintergrund: URL (IMG/ICO.PNG) NO-Repeat; Z-Index: 6; Schriftgröße: 12px; } </style> <script src = "http://code.jquery.com/jquery-2.2.min.js" Integrity = "SHA256-BBHDLVQF/XtY9GJA0DQ3HIWQF8LACRTXXZKRUT44 =" CROSORIGIN = "ANONYMUS"> id = "scoremark"> <em> 8.0 </em> <span> <span> </span> <ul> <li> <a href = "JavaScript: void (0)" Datenname = "Sehr schlecht"> 1 </a> </li> <li> <a href = "javascript: void (0)" data-name = " href = "javaScript: void (0)" data-name = "more"> 3 </a> </li> <li> <a href = "javaScript: void (0)" data-name = "Better"> 4 </a> </li> <li> <a href = "javascript: void (0)" data-name = "> 4 </a> < href = "javaScript: void (0)" data-name = "sehr gut"> 5 </a> </li> </ul> </span> <div style = "links: 0px; Anzeige: Keine; a "). mouseenter (function () {var txt = $ (this) .attr (" Datenname "); var x = $ (this) .Parent (" li "). index (); star.find (". tipps "). html (txt) .css (" links ",-6+x*24) .show ();}); star.find (". star ul li a"). museleave (function () {star.find (". tipps"). html (""). CSS ("links", 0) .hide ();}); } </script> </body> </html>4. Prinzip
4.1html Struktur
<div id = "scoremark"> <em> 8.0 </em> <span> <pan> </span> <ul> <li> <a href = "JavaScript: void (0)" data-name = "Sehr schlecht"> 1 </a> </li> <li> <a href = " href = "javaScript: void (0)" data-name = "more"> 3 </a> </li> <li> <a href = "javaScript: void (0)" data-name = "Better"> 4 </a> </li> <li> <a href = "javascript: void (0)" data-name = "> 4 </a> < href = "JavaScript: void (0)" data-name = "Sehr gut"> 5 </a> </li> </ul> </span> <div style = "links: 0px; Anzeige: Keine;"> </div> </div>
Eine kurze Beschreibung des Prinzips: hauptsächlich die Abdeckungsbeziehung des mehrschichtigen Hintergrunds
Zunächst die Struktur: Es gibt zwei Schichten unten. Eines ist ystar und der andere ist ul.
4.1. Erzielen Sie den Bewertungseffekt von 4 Sternen
Die äußere Schicht.star ist feste Breite und das Hintergrundbild sind hohle graue Sterne.
Im Inneren repräsentiert .Dar die beleuchteten Sterne, und sein Hintergrund besteht aus soliden gelben Sternen. Wenn es 4 helle Sterne gibt, setzen Sie die Breite von .Dar auf 80%. 2 Pillen sind 40%.
4.2. Erkenne die Wirkung des Zündigen der Sterne auf dem Mausbeweg
Hauptsächlich durch CSS kontrolliert. Der Schlüssel wird erreicht durch: Schwebe.
Wenn UL: schweben, wurde ein Hintergrundbild von hohlen grauen Sternen hinzugefügt.
Wenn a: schweben, wird die Breite zur Breite der ersten Sterne.
Auf diese Weise gibt es beim Bewegen tatsächlich 4 Hintergründe. Zum Beispiel, wenn Sie den zweiten Stern schweben, von unten nach oben,,
.Star dunkler Stern 100% Breite.
4.3. Maus -Hover -Anzeigespitze
Erhalten Sie die Datennamenimplementierung von A durch JS.
Das obige ist der detaillierte Inhalt des Beispielcode (zwei Methoden) zur Implementierung der Sternbewertung von JS, die Ihnen vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung für die Wulin Network -Website!