1. Método 1
1. Use imágenes
2. Estructura y estilo
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document </title> <style> ul {padding-left: 0; desbordamiento: oculto; } ul li {float: izquierda; Estilo de lista: Ninguno; Ancho: 27px; Altura: 27px; Antecedentes: url (img/star.gif)} ul li a {display: block; Ancho: 100%; Top-top: 27px; desbordamiento: oculto; } ul li.light {Posición de fondo: 0 -29px; } </estilo> </head> <body> <ul> <li> <a href = "javascript :;"> 1 </a> </li> <li> <a href = "javascript :;"> 2 </a> </li> <li> <a href = "javaScript:;"> 3 </a> </li> <li> <a href = "javascript :;"> 4 </a> </li> <li> <a href = "javascript :;"> 5 </a> </li> </ul> </body> </html>Si se agrega la clase de luz, se convertirá en una estrella brillante, lo que significa cambiar la posición de fondo y convertir la estrella hueca en una sólida. Entonces, cuando se implementa el JS, es agregar un nombre de clase de luz al LI.
Efecto:
3. Interacción JS
<script> var num = finalNum = tempnum = 0; var lis = document.getElementsBytagName ("li"); // num: el número de estrellas iluminadas pasadas en // finalnum: el número de estrellas iluminadas finales // tempnum: una función de valor intermedio fnshow (num) {finalNum = num || tempnum; // Si el número pasado es 0, FinalNum toma el valor de tempnum para (var i = 0; i <lis.length; i ++) {lis [i] .classname = i <finalNum? "Light": ""; // La iluminación de las estrellas es el estilo de agregar clase a la luz}} para (var i = 1; i <= lis.length; i ++) {lis [i - 1] .index = i; lis [i - 1] .onmouseover = function () {// El mouse pasa y ilumina las estrellas. fnshow (this.Index); // El valor pasado es positivo, es decir, finalnum} lis [i - 1] .onMouseOut = function () {// Las estrellas se oscurecen cuando el mouse deja fnshow (0); // el valor aprobado es 0, finalNum es tempnum, el inicial es 0} lis [i - 1] .onclout = function () se llamará, y el valor de tempnum se cambiará para iluminar las estrellas tempnum = this.index; }} </script>Un punto clave de este diseño es que cuando MouOut, se guarda un valor para oscurecer las estrellas. La inicial es 0 (0 estrellas se vuelven más brillantes, lo que significa que está completamente oscuro). Si no hace clic, mientras el mouse se vaya, todas las estrellas estarán oscuras. El evento de clic activará un MouseOver y un mouseut. Por lo tanto, al hacer clic, cambie el tempnum para determinar cuántas estrellas serán brillantes cuando el mouse se vaya. Este valor se mantendrá hasta la próxima vez que haga clic.
Efecto final:
2. Método 2
1. Use imágenes
2. El efecto es el siguiente
3. El código completo es el siguiente
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> demo de Starof </title> <style> ul {padding: 0; margin: 0;} li {list-style: none;}/*estrella*/.scoremark {width: 154px; posicion; .Scoremark .spore {float: right; Pantalla: bloque; margen: 0 0 0 10px; tamaño de fuente: 18px; Línea de altura: 22px; Font-Weight: Bold; Color: #F70; } .Scoremark .star {float: right; Pantalla: bloque; Posición: relativo; Ancho: 116px; Altura: 20px; Antecedentes: url (img/star.png) No -repeat 0px -20px; } .Scoremark .ystar {posición: absoluto; arriba: 0; Izquierda: 0; Ancho: 116px; Altura: 20px; Antecedentes: url (img/star.png) No-repeat 0px 0px; } .Scoremark .star ul {ancho: 120px; Altura: 20px; Posición: Absoluto; arriba: 0; Izquierda: 0; } .Scoremark .star ul: hover {fondo: url (img/star.png) No -repeat 0px -20px; } .Scoremark .star li {float: izquierda; Ancho: 24px; Altura: 20px; } .Scoremark .star li a {display: block; Ancho: 24px; Altura: 20px; desbordamiento: oculto; text -indent: -9999px; Posición: Absoluto; índice z: 5; } .Scoremark .star li a: hover {fondo: url (img/star.png) No-repeat 0px 0px; Índice Z: 3; Izquierda: 0} .Scoremark .star a.one-star {izquierda: 0; } .Scoremark .star a.one-star: hover {ancho: 24px} .scoremark .star a.two-stars {izquierda: 24px; } .Scoremark .star a.two-stars: hover {ancho: 48px} .scoremark .star a.three-stars {izquierda: 48px; } .Scoremark .Star A.Three-Stars: Hover {Width: 72px} .Scoremark .Star A.Four-Stars {Left: 72px; } .Scoremark .star a.four-stars: hover {ancho: 96px} .scoremark .star a.five-stars {izquierda: 96px; } .Scoremark .star a.Five-Stars: Hover {ancho: 120px; } .Scoremark .tips {posición: absoluto; arriba: -28px; Izquierda: 0; Ancho: 40px; Altura: 21px; Color: #333; Línea de altura: 20px; relleno: 0 0 5px 0; Text-Align: Center; Antecedentes: URL (img/ico.png) No-repeat; Índice Z: 6; tamaño de fuente: 12px; } </style> <script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="crosorigin="anonymous"></script></head><body> <div id = "Scoremark"> <em> 8.0 </em> <span> <span> </span> <ul> <li> <a href = "javaScript: void (0)" data-name = "muy pobre"> 1 </a> </li> <li> <a href = "javaScript: void (0)" ninum href = "javaScript: void (0)" data-name = "más"> 3 </a> </li> <li> <a href = "javascript: void (0)" data-name = "mejor"> 4 </a> </li> <li> <a href = "javaScript: void (0)" data name = "mejor" href = "javaScript: void (0)" data-name = "muy bueno"> 5 </a> </li> </ul> </span> <div style = "izquierda: 0px; display: none;"> </div> </div> <script> // starscore ($ ($ (". Scoremark"); function starscore (estrella) {Star.Find ("". "". a "). MouseEnter (function () {var txt = $ (this) .attr (" data-name "); var x = $ (this) .parent (" li "). index (); star.find (". Tips "). Html (txt) .css (" izquierda ",-6+x*24) .show ();}); Star.Find (". } </script> </body> </html>4. Principio
4.1html estructura
<div id = "Scoremark"> <em> 8.0 </em> <span> <span> </span> <ul> <li> <a href = "javascript: void (0)" data-name = "muy pobre"> 1 </a> </ali> <li> <a href = "javaScript: name (0)" nause = "pobre" href = "javaScript: void (0)" data-name = "más"> 3 </a> </li> <li> <a href = "javascript: void (0)" data-name = "mejor"> 4 </a> </li> <li> <a href = "javaScript: void (0)" data name = "mejor" href = "javascript: void (0)" data-name = "muy bueno"> 5 </a> </li> </ul> </span> <div style = "izquierda: 0px; display: none;"> </div> </div>
Una breve descripción del principio: principalmente la relación de cobertura de los antecedentes de múltiples capas
En primer lugar, la estructura: hay dos capas a continuación. Uno es Ystar y el otro es UL.
4.1. Lograr el efecto de calificación de 4 estrellas
La capa externa. La estrella es de ancho fijo, y la imagen de fondo es estrellas grises huecas.
En el interior, .ystar representa las estrellas encendidas, y su fondo son estrellas amarillas sólidas. Si hay 4 estrellas brillantes, establezca el ancho de .Ystar al 80%. 2 píldoras son del 40%.
4.2. Darse cuenta del efecto de iluminar las estrellas en el ratón flotante
Principalmente controlado a través de CSS. La clave se logra a través de: Hover.
Cuando ul: desplazamiento, se agregó una imagen de fondo de estrellas grises huecas.
Cuando A: desplazamiento, el ancho se convierte en el ancho de las primeras estrellas.
De esta manera, cuando se desplaza, en realidad hay 4 capas de fondos. Por ejemplo, al pasar la segunda estrella, de abajo hacia arriba,
.Star Dark Star 100% ancho. Star Bright Star 80 Ancho ul Dark Star 100% ancho. Dos estrellas 40% ancho
4.3. Consejo de visualización del ratón
Obtenga la implementación del nombre de datos de A a JS.
Lo anterior es el contenido detallado del código de ejemplo (dos métodos) para implementar la función de calificación STAR de JS presentada a usted. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje. El editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin Network!