1. Método 1
1. Use imagens
2. Estrutura e estilo
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> estouro: oculto; } ul li {float: esquerda; estilo de lista: nenhum; Largura: 27px; Altura: 27px; Antecedentes: url (img/star.gif)} ul li a {display: block; largura: 100%; Top-top: 27px; estouro: oculto; } ul li.light {posição de fundo: 0 -29px; } </style> </head> <body> <ul> <li> <a href = "javascript :;"> 1 </a> </li> <li> <a href = "javascript:;"> 2 </a> </li> <li> <a hre = "javascript:;"> 3 </a> href = "javascript :;"> 4 </a> </li> <li> <a href = "javascript :;"> 5 </a> </li> </ul> </body> </html>Se a classe leve for adicionada, ela se tornará uma estrela brilhante, o que significa alterar a posição de fundo e transformar a estrela oca em uma sólida. Portanto, quando o JS é implementado, é para adicionar um nome de classe leve ao LI.
Efeito:
3. Interação JS
<SCRIPT> var num = finalNum = tempnum = 0; var lis = document.getElementsByTagName ("li"); // num: o número de estrelas iluminadas passadas em // finalnum: o número de estrelas iluminadas finais // tempnum: uma função de valor intermediário fnshow (num) {finalnum = num || tempnum; // Se o número passado é 0, Finalnum leva o valor do tempnum para (var i = 0; i <lis.length; i ++) {lis [i] .className = i <finalnum? "Light": ""; // acender as estrelas é o estilo de adicionar classe à luz}} para (var i = 1; i <= lis.length; i ++) {lis [i - 1] .index = i; lis [i - 1] .onMouseOver = function () {// O mouse passa e acende as estrelas. fnshow (this.index); // O valor passado é positivo, que é finalnum} lis [i - 1] .onmouseout = function () {// as estrelas escurecem quando o mouse sai fnsshow (0); // o valor passado em IS 0, finalnum é o tempnum, o inicial (0); OnMouseOut será chamado, e o valor do tempnum será alterado para iluminar as estrelas tempnum = this.index; }} </script>Um ponto -chave desse design é que, quando um valor é salvo para escurecer as estrelas. A inicial é 0 (0 estrelas ficam mais brilhantes, o que significa que está completamente escuro). Se você não clicar, desde que as folhas do mouse, todas as estrelas ficarão escuras. O evento de cliques acionará um mouseOver e um mouseOut. Portanto, ao clicar, altere o tempnum para determinar quantas estrelas ficarão brilhantes quando o mouse sair. Este valor será mantido até a próxima vez que você clicar.
Efeito final:
2. Método 2
1. Use imagens
2. O efeito é o seguinte
3. O código completo é o seguinte
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo of starof</title> <style> ul{padding:0;margin: 0;} li{list-style: none;} /*Star rating*/ .scoremark{width:154px;position:relative;margin-top:50px;} .scoremark .score {float: certo; exibição: bloco; margem: 0 0 0 10px; Size da fonte: 18px; altura da linha: 22px; Peso da fonte: negrito; Cor: #f70; } .Scoremark .Star {Float: Right; exibição: bloco; Posição: relativa; Largura: 116px; Altura: 20px; Antecedentes: URL (img/star.png) sem repetição 0px -20px; } .scoremark .ystar {posição: absoluto; topo: 0; Esquerda: 0; Largura: 116px; Altura: 20px; Antecedentes: URL (img/star.png) sem repetição 0px 0px; } .scoremark .Star ul {Width: 120px; Altura: 20px; Posição: Absoluto; topo: 0; Esquerda: 0; } .Scoremark .Star ul: Hover {Background: url (img/star.png) No -repetir 0px -20px; } .scoremark .Star li {float: esquerda; Largura: 24px; Altura: 20px; } .Scoremark .Star Li A {Display: Block; Largura: 24px; Altura: 20px; estouro: oculto; Indente de texto: -9999px; Posição: Absoluto; Index z: 5; } .Scoremark .Star Li A: Hover {Background: url (img/star.png) No-repetir 0px 0px; Z-Index: 3; Esquerda: 0} .Scoremark .Star A.One-Star {Esquerda: 0; } .Scoremark .Star A.One-Star: Hover {Width: 24px} .Scoremark .Star A.Two-Stars {esquerda: 24px; } .Scoremark .Star A.Two-Stars: Hover {Width: 48px} .Scoremark .Star A.Three-Stars {Esquerda: 48px; } .Scoremark .Star A.Three-Stars: Hover {Width: 72px} .Scoremark .Star A.Four-Stars {Esquerda: 72px; } .Scoremark .Star A.Four-Stars: Hover {Width: 96px} .Scoremark .Star A.Five-Stars {Esquerda: 96px; } .Scoremark .Star A.Five-Stars: Hover {Width: 120px; } .Scoremark .Tips {Posição: Absolute; topo: -28px; Esquerda: 0; Largura: 40px; Altura: 21px; Cor: #333; altura de linha: 20px; preenchimento: 0 0 5px 0; Alinhamento de texto: centro; Antecedentes: URL (IMG/ICO.PNG) No-repetir; Z-Index: 6; tamanho de fonte: 12px; } </style> <script src = "http://code.jquery.com/jquery-2.2.4.min.js" integrity = "sha256-bbhdlvqf/xty9gjA0dq3hiwqf8lacrtxzzzkruTelt44 =" crossorigin = "CROMSORIGIM) id = "scoremark"> <em> 8.0 </em> <pan> <pan> </span> <ul> <li> <a href = "javascript: void (0)" data-name = "muito pobre"> 1 </a> </li> <li> <a href = "javascript: void (0)" Datanname = <li> <a href = " href = "javascript: void (0)" data-name = "mais"> 3 </a> </li> <li> <a href = "javascript: void (0)" data-name = "melhor"> 4 </a> </li> <li> <a href = "javascript: void (0) href = "javascript: void (0)" data-name = "muito bom"> 5 </a> </li> </ul> </span> <div style = "esquerda: 0px; display: nenhum;"> </div> </div> <cript> // starcore starsCore ($ (". scoremark"); a "). star.find (". Star ul li a"). } </script> </body> </html>4. Princípio
4.1html estrutura
<div id = "scoremark"> <em> 8.0 </em> <pan> <pan> </span> <ul> <li> <a href = "javascript: void (0)" data-name = "muito pobre"> 1 </a> </li> <li> <a href = "javascript:"> pobre "" href = "javascript: void (0)" data-name = "mais"> 3 </a> </li> <li> <a href = "javascript: void (0)" data-name = "melhor"> 4 </a> </li> <li> <a href = "javascript: void (0) href = "javascript: void (0)" data-name = "muito bom"> 5 </a> </li> </ul> </span> <div style = "esquerda: 0px; display: nenhum;"> </div> </div>
Uma breve descrição do princípio: principalmente a relação de cobertura de fundo de várias camadas
Primeiro de tudo, a estrutura: existem duas camadas abaixo. Um é Ystar e o outro é ul.
4.1. Alcançar o efeito de classificação de 4 estrelas
A camada externa. A estrela tem largura fixa e a imagem de fundo é estrelas cinza ocas.
No interior, a estrela representa as estrelas iluminadas e seu fundo é estrelas amarelas sólidas. Se houver 4 estrelas brilhantes, defina a largura do .ystar como 80%. 2 comprimidos são 40%.
4.2. Perceba o efeito de acender as estrelas no mouse pairar
Controlado principalmente através de CSS. A chave é alcançada através: Passe o mouse.
Quando UL: Passe o mouse, foi adicionada uma imagem de fundo de estrelas cinzentas ocas.
Quando A: Passe o mouse, a largura se torna a largura das primeiras estrelas.
Dessa forma, quando o mouse, na verdade existem 4 camadas de fundo. Por exemplo, ao passar o mouse a segunda estrela, de baixo para cima,
.Star estrela escura 100% largura.Star Bright Star 80 Largura Ul estrela escura Star 100% Largura. Dois estrelas 40% de largura
4.3. Dica de exibição do mouse pairar
Obtenha a implementação do nome de dados de A a JS.
O exposto acima é o conteúdo detalhado do código de exemplo (dois métodos) para implementar a função de classificação de estrelas do JS introduzido em você. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem. O editor responderá a tempo. Muito obrigado pelo seu apoio ao site da Wulin Network!