No es difícil crear una función de calificación de estrellas, pero es un poco difícil escribirla simplemente usando CSS. Primero tomemos una captura de pantalla:
El efecto es muy sencillo. Quizás ya tengas en mente la idea de implementarlo. Echemos un vistazo a nuestro método de implementación habitual:
CSS:
código
.jsstar
{ estilo de lista: ninguno;
margen: 0px;
relleno: 0px;
ancho: 100px;
altura: 20 píxeles;
posición: relativa;
}
.jsstarli
{
relleno: 0px;
margen: 0px;
flotador: izquierda;
ancho: 20px;
altura: 20 píxeles;
fondo:url(star_rating.gif) 0 0 sin repetición;
}
HTML:
<p>Implementación de JavaScript + CSS</p>
<ul clase="jsstar">
<li title="Una estrella"></li>
<li title="Dos estrellas"></li>
<li título="Samsung"></li>
<li title="Cuatro estrellas"></li>
<li title="cinco estrellas"></li>
</ul>
JS: (yo uso jquery)
<script tipo="text/javascript" src="jquery-1.3.1.js"></script>
<tipo de script="texto/javascript">
$(documento).listo(función(){
$(".jsstar >li").hover(
function(){$(this).css({"background-position":"left bottom"}).prev().trigger("mouseover")},
function(){$(this).css({"background-position":"left top"}).prev().trigger("mouseout")})
.click(function(){alert($(this).attr("título"))});
});
</script>
Aquí está la representación:
¿No es diferente de lo anterior, pero creo que si el usuario desactiva JavaScript, el efecto no sería muy desastroso?
Entonces pensamos en usar CSS puro para implementarlo. Aquí está el código:
CSS:
código
1 /*Inicio de estrella CSS*/
2.calificación de estrellas
3 {
4 estilos de lista: ninguno;
5 margen: 0px;
6 relleno: 0px;
7 ancho: 100px;
8 altura: 20px;
9 posición: relativa;
10 fondo: url(star_rating.gif) arriba a la izquierda repetir-x;
11 }
12.calificación de estrellas
13 {
14 relleno: 0px;
15 margen: 0px;
16 flotador: izquierda;
17}
18 .calificación de estrellas li a
19 {
20 visualización: bloque;
21 ancho: 20px;
22 altura: 20px;
23 decoración de texto: ninguna;
24 sangría de texto: -9000px;
25 índice z: 20;
26 posición: absoluta;
27 relleno: 0px;
28 }
29 .calificación de estrellas li a:hover
30 {
31 fondo: url(star_rating.gif) parte inferior izquierda;
32 índice z: 1;
33 izquierda: 0px;
34}
35.calificación de estrellas a.una estrella
36 {
37 izquierda: 0px;
38 }
39.calificación de estrellas a.una estrella:hover
40 {
41 ancho: 20px;
42 }
43.calificación de estrellas a.dos estrellas
44 {
45 izquierda: 20px;
46 }
47.calificación de estrellas a.dos estrellas:hover
48 {
49 ancho: 40px;
50 }
51.calificación de estrellas a.tres estrellas:hover
52 {
53 ancho: 60px;
54 }
55.calificación de estrellas a.tres estrellas
56 {
57 izquierda: 40px;
58 }
59.calificación de estrellas a.cuatro estrellas
60 {
61 izquierda: 60px;
62 }
63.calificación de estrellas a.cuatro estrellas:hover
64 {
65 ancho: 80px;
66 }
67.calificación de estrellas a.cinco estrellas
68 {
69 izquierda: 80px;
70}
71.calificación de estrellas a.cinco estrellas:hover
72 {
73 ancho: 100px;
74
75 }
HTML:
<ul class='calificación de estrellas'>
<li><a href='#' title='Una estrella' class='una-estrella'>1</a></li>
<li><a href='#' title='dos estrellas' class='dos-estrellas'>2</a></li>
<li><a href='#' title='Samsung' class='tres-estrellas'>3</a></li>
<li><a href='#' title='cuatro estrellas' class='cuatro estrellas'>4</a></li>
<li><a href='#' title='五星' class='cinco estrellas'>5</a></li>
</ul>
Al observar los números de línea CSS anteriores, ¿le sorprende que un efecto tan simple requiera tanto código? En mi opinión, solo puedes tener un efecto y un estilo sin usar JS. Si tienes un efecto más simple y deslumbrante, ¡házmelo saber!