Não é difícil criar uma função de classificação por estrelas, mas é um pouco difícil escrevê-la simplesmente usando CSS. Vamos fazer uma captura de tela primeiro:
O efeito é muito simples. Talvez você já tenha a ideia de implementá-lo. Vamos dar uma olhada em nosso método de implementação usual:
CSS:
código
.jsstar
{estilo de lista: nenhum;
margem: 0px;
preenchimento: 0px;
largura: 100px;
altura: 20px;
posição: relativa;
}
.jsstarli
{
preenchimento:0px;
margem: 0px;
flutuar: esquerda;
largura:20px;
altura:20px;
background:url(star_rating.gif) 0 0 sem repetição;
}
HTML:
<p>Implementação Javascript + CSS</p>
<ul class="jsstar">
<li title="Uma estrela"></li>
<li title="Duas estrelas"></li>
<li title="Samsung"></li>
<li title="Quatro estrelas"></li>
<li title="cinco estrelas"></li>
</ul>
JS: (eu uso jquery)
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="texto/javascript">
$(documento).ready(function(){
$(".jsstar >li").hover(
function(){$(this).css({"background-position":"parte inferior esquerda"}).prev().trigger("mouseover")},
function(){$(this).css({"background-position":"topo esquerdo"}).prev().trigger("mouseout")})
.click(function(){alert($(this).attr("title"))});
});
</script>
Aqui está a renderização:
Não é diferente do anterior, mas então acho que se o usuário desabilitar o javascript o efeito não seria muito desastroso?
Então pensamos em usar CSS puro para implementá-lo. Aqui está o código:
CSS:
código
1 /*Início de estrela CSS*/
2. classificação por estrelas
3 {
4 estilo de lista: nenhum;
Margem 5: 0px;
6 preenchimento: 0px;
7 largura: 100px;
8 altura: 20px;
9 posição: relativo;
10 plano de fundo: url(star_rating.gif) canto superior esquerdo repetir-x;
11}
12. classificação por estrelas
13 {
14 preenchimento: 0px;
Margem 15: 0px;
16 flutuador: esquerda;
17}
18.classificação por estrelas li a
19 {
20 display: bloco;
Largura 21: 20px;
Altura 22: 20px;
23 decoração de texto: nenhuma;
24 recuo de texto: -9000px;
25 índice z: 20;
26 posição: absoluta;
27 preenchimento: 0px;
28}
29 .classificação por estrelas li a:hover
30 {
31 plano de fundo: url(star_rating.gif) canto inferior esquerdo;
32 índice z: 1;
33 à esquerda: 0px;
34}
35.classificação por estrelas a.uma estrela
36 {
37 à esquerda: 0px;
38}
39.classificação por estrelas a.uma estrela:hover
40 {
Largura 41: 20px;
42}
43.classificação por estrelas a.duas estrelas
44 {
45 restantes: 20px;
46}
47. classificação por estrelas a.duas estrelas: passe o mouse
48 {
Largura 49: 40px;
50}
51. classificação por estrelas a.três estrelas: passe o mouse
52 {
Largura 53: 60px;
54}
55.classificação por estrelas a.três estrelas
56 {
57 à esquerda: 40px;
58}
59.classificação por estrelas a.quatro estrelas
60 {
61 à esquerda: 60px;
62}
63. classificação por estrelas a.quatro estrelas: passe o mouse
64 {
Largura 65: 80px;
66}
67.classificação por estrelas a.cinco estrelas
68 {
69 à esquerda: 80px;
70}
71. classificação por estrelas a.cinco estrelas: passe o mouse
72 {
Largura 73: 100px;
74
75}
HTML:
<ul class='classificação por estrelas'>
<li><a href='#' title='Uma estrela' class='one-star'>1</a></li>
<li><a href='#' title='duas estrelas' class='duas estrelas'>2</a></li>
<li><a href='#' title='Samsung' class='três estrelas'>3</a></li>
<li><a href='#' title='quatro estrelas' class='quatro estrelas'>4</a></li>
<li><a href='#' title='五星' class='five-stars'>5</a></li>
</ul>
Olhando para os números das linhas CSS acima, você está chocado com o fato de um efeito tão simples exigir tanto código? Na minha opinião, você só pode ter um efeito e um estilo sem usar JS. Se você tiver um efeito mais simples e deslumbrante, por favor me avise!