1. Méthode 1
1. Utilisez des photos
2. Structure et style
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <t titre> Document </Title> <style> ul {padding-left: 0; débordement: caché; } ul li {float: gauche; Style de liste: aucun; Largeur: 27px; hauteur: 27px; Contexte: url (img / star.gif)} ul li a {affichage: block; Largeur: 100%; Tableau de rembourrage: 27px; débordement: caché; } ul li.light {Backgrack Position: 0 -29px; } </ style> </ head> <body> <ul> <li> <a href = "javascript :;"> 1 </a> </li> <li> <a href = "javascript :;"> 2 </a> </li> <li> <a href = "javascript :; href = "JavaScript :;"> 4 </a> </li> <li> <a href = "javascript :;"> 5 </a> </li> </ul> </ body> </html>Si la classe Light est ajoutée, elle deviendra une étoile brillante, ce qui signifie changer la position d'arrière-plan et transformer l'étoile creuse en une étoile solide. Ainsi, lorsque le JS est implémenté, il s'agit d'ajouter un nom de classe léger au LI.
Effet:
3. Interaction js
<cript> var num = finalnum = tempnum = 0; var lis = document.getElementsByTagName ("li"); // num: le nombre d'étoiles éclairées passées dans // finalnum: le nombre d'étoiles finales allumées // tempnum: une fonction de valeur intermédiaire fnshow (num) {finalnum = num | tempnum; // si le num passe est 0, finalnum prend la valeur de tempnum pour (var i = 0; i <lis.length; i ++) {lis [i] .classname = i <finalnum? "Light": ""; // Éclairage des étoiles est le style d'ajout de classe à la lumière}} pour (var i = 1; i <= lis.length; i ++) {lis [i - 1] .index = i; lis [i - 1] .onMouseOver = function () {// La souris passe et s'allume les étoiles. fnshow (this.index); // La valeur transmise est positive, c'est-à-dire finalnum} lis [i - 1] .onMouseout = function () {// Les étoiles s'assombrissent lorsque la souris quitte fnshow (0); // la valeur transmise est 0, finalnum est tempnum, l'initiale est 0} lis [i - 1] .onclick = function () {// la souris Clicks, et on tire-tas. être appelé, et la valeur tempnum sera modifiée pour éclairer les étoiles tempnum = this.index; }} </ script>Un point clé de cette conception est que lorsque le mousquette, une valeur est enregistrée pour rendre les étoiles sombres. L'initiale est 0 (0 étoiles devient plus lumineuse, ce qui signifie qu'elle est complètement sombre). Si vous ne cliquez pas, tant que la souris part, toutes les étoiles seront sombres. L'événement Click déclenchera un souris et une souris. Par conséquent, en cliquant, modifiez le tempnu pour déterminer le nombre d'étoiles brillantes lorsque la souris partira. Cette valeur sera maintenue jusqu'à la prochaine fois que vous cliquez.
Effet final:
2. Méthode 2
1. Utilisez des photos
2. L'effet est le suivant
3. Le code complet est le suivant
<! Doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <itle> Demo of starof </tapie> <ystyle> ul {padding: 0; margin: 0;} li {list-style: nother;} / * star rating * / star * .ScorMark {width: 154px; position: relative; margin-top: 50px;} .scoremark .score {float: droit; Affichage: bloc; marge: 0 0 0 10px; taille de police: 18px; hauteur de ligne: 22px; Police-poids: Bold; Couleur: # F70; } .scoremark .star {float: droit; Affichage: bloc; Position: relative; Largeur: 116px; hauteur: 20px; Contexte: URL (img / star.png) sans répétition 0px -20px; } .scoremark .ystar {position: absolue; en haut: 0; à gauche: 0; Largeur: 116px; hauteur: 20px; Contexte: URL (img / star.png) sans répétition 0px 0px; } .scoremark .star ul {width: 120px; hauteur: 20px; Position: absolue; en haut: 0; à gauche: 0; } .scoremark .star ul: hover {background: url (img / star.png) sans répétition 0px -20px; } .scoremark .star li {float: left; Largeur: 24px; hauteur: 20px; } .scoremark .star li a {display: block; Largeur: 24px; hauteur: 20px; débordement: caché; Texte-indent: -9999px; Position: absolue; Z-Index: 5; } .scoremark .star li a: hover {background: url (img / star.png) sans répétition 0px 0px; Z-Index: 3; gauche: 0} .scoremark .star a.one-star {Left: 0; } .scoremark .star a.one-star: hover {width: 24px} .scoremark .star a.two-stars {Left: 24px; } .scoremark .star a.two-stars: hover {width: 48px} .scoremark .star a.three-stars {Left: 48px; } .scoreMark .Star A. Three-Stars: Hover {width: 72px} .scoremark .star a.four-stars {Left: 72px; } .scoremark .star a.four-stars: hover {width: 96px} .scoremark .star a.five-stars {Left: 96px; } .scoremark .star a.five-stars: hover {width: 120px; } .scoremark .tips {position: absolue; En haut: -28px; à gauche: 0; Largeur: 40px; hauteur: 21px; Couleur: # 333; hauteur de ligne: 20px; rembourrage: 0 0 5px 0; Texte-aligne: Centre; CONTEXTE: URL (IMG / ICO.PNG) sans répétition; Z-Index: 6; taille de police: 12px; } </ style> <script src = "http://code.jquery.com/jquery-2.2.4.min.js" Integrity = "sha256-bhdlvqf / xty9gja0dq3hiwqf8lacrtxxzkrutelt44 =" crosorigin = "anonymous"> </ script> </ body> <body> <body> <body> <body> <body> <body> <body> <body> <body> <body> <body> <body> <body> <body> <body> <body> <body> <body> <body> <body> <body> <body> <body> <body> <body> <body> id = "scoremark"> <em> 8.0 </em> <span> <span> </span> <ul> <li> <a href = "javascript: void (0)" data-name = "très pauvre"> 1 </a> </li> <li> <a href = "javascrip href = "javascript: void (0)" data-name = "plus"> 3 </a> </li> <li> <a href = "javascript: void (0)" data-name = "best"> 4 </a> </li> <li> <a href = "javascrip href = "javascript: void (0)" data-name = "très bon"> 5 </a> </li> </ul> </span> <div style = "Left: 0px; affichage: non;"> </div> </div> </ script> // star rating starscore ($ (".. a "). MouseEntiner (function () {var txt = $ (this) .attr (" data-name "); var x = $ (this) .parent (" li "). index (); star.find (". Tips "). html (txt) .css (" gauche ", - 6 + x * 24) .show ();}); star.find (". Star ul li a"). Mouseleave (function () {star.find (". TIPS"). html (""). CSS ("Left", 0) .hide ();}); } </ script> </ body> </html>4. Principe
Structure 4.1HTML
<div id = "scoremark"> <em> 8.0 </em> <span> <span> </span> <ul> <li> <a href = "javascript: void (0)" data-name = "très pauvre"> 1 </a> </li> <li> <a href = "javascrip href = "javascript: void (0)" data-name = "plus"> 3 </a> </li> <li> <a href = "javascript: void (0)" data-name = "best"> 4 </a> </li> <li> <a href = "javascrip href = "JavaScript: void (0)" data-name = "très bon"> 5 </a> </li> </ul> </span> <div style = "Left: 0px; affichage: aucun;"> </div> </div>
Une brève description du principe: principalement la relation de couverture de fond multicouche
Tout d'abord, la structure: il y a deux couches ci-dessous. L'un est Ystar et l'autre est ul.
4.1. Réaliser l'effet de notation de 4 étoiles
La couche externe. Star est une largeur fixe et l'image d'arrière-plan est des étoiles grises couvertes.
À l'intérieur, .ystar représente les étoiles allumées, et son arrière-plan est des étoiles jaunes solides. S'il y a 4 étoiles brillantes, réglez la largeur de .ystar à 80%. 2 pilules sont 40%.
4.2. Réalisez l'effet de l'éclairage des étoiles sur le survol de la souris
Principalement contrôlé par CSS. La clé est réalisée à travers: Hover.
Lorsque UL: Volant, une image de fond d'étoiles grises creux a été ajoutée.
Quand A: planer, la largeur devient la largeur des premières étoiles.
De cette façon, lorsqu'ils planent, il y a en fait 4 couches d'arrière-plan. Par exemple, lorsqu'il oscille la deuxième étoile, du bas en haut,
.Star Dark Star 100% largeur.YSTAR BRIGHT Star 80 Largeur Ul Dark Star 100% largeur.
4.3. Conseil d'affichage de survol de la souris
Obtenez l'implémentation de nom de données de A à JS.
Ce qui précède est le contenu détaillé de l'exemple de code (deux méthodes) pour implémenter la fonction de notation d'étoile de JS présenté à vous. J'espère que cela vous sera utile. Si vous avez des questions, laissez-moi un message. L'éditeur vous répondra à temps. Merci beaucoup pour votre soutien pour le site Web du réseau Wulin!