Aquí hay una solución para usted, usando solo una imagen muy pequeña y simple y un elemento span generado automáticamente:
CSS
span.stars, span.stars span {
display: block;
background: url(stars.png) 0 -16px repeat-x;
width: 80px;
height: 16px;
}
span.stars span {
background-position: 0 0;
}
Imagen
(fuente: ulmanen.fi )
Nota: ¡ NO enlace a la imagen de arriba! Copie el archivo en su propio servidor y utilícelo desde allí.
jQuery
$.fn.stars = function() {
return $(this).each(function() {
// Get the value
var val = parseFloat($(this).html());
// Make sure that the value is in 0 - 5 range, multiply to get width
var size = Math.max(0, (Math.min(5, val))) * 16;
// Create stars holder
var $span = $('<span />').width(size);
// Replace the numerical value with stars
$(this).html($span);
});
}
Si desea restringir las estrellas a solo la mitad o un cuarto de estrella, agregue una de estas filas antes de la var sizefila:
val = Math.round(val * 4) / 4; /* To round to nearest quarter */
val = Math.round(val * 2) / 2; /* To round to nearest half */
HTML
<span class="stars">4.8618164</span>
<span class="stars">2.6545344</span>
<span class="stars">0.5355</span>
<span class="stars">8</span>
Uso
$(function() {
$('span.stars').stars();
});
Salida
(fuente: ulmanen.fi )
Manifestación
http://www.ulmanen.fi/stuff/stars.php
Probablemente esto se adapte a sus necesidades. Con este método no tienes que calcular ningún ancho de estrella de tres cuartos o lo que sea, solo dale un flotador y te dará tus estrellas.
Una pequeña explicación sobre cómo se presentan las estrellas podría estar en orden.
El script crea dos elementos de tramo a nivel de bloque. Ambos tramos obtienen inicialmente un tamaño de 80px * 16px y una imagen de fondo stars.png. Los tramos están anidados, de modo que la estructura de los tramos se ve así:
<span class="stars">
<span></span>
</span>
El tramo exterior obtiene una background-positionde 0 -16px. Eso hace visibles las estrellas grises en el tramo exterior. Como el tramo exterior tiene una altura de 16px y repeat-x, solo mostrará 5 estrellas grises.
El tramo interior por otro lado tiene una background-positionde0 0 cuales solo hace visibles las estrellas amarillas.
Por supuesto, esto funcionaría con dos archivos de imágenes separados, star_yellow.png y star_gray.png. Pero como las estrellas tienen una altura fija, podemos combinarlas fácilmente en una imagen. Esto utiliza la técnica de sprites CSS .
Ahora, a medida que se anidan los tramos, se superponen automáticamente entre sí. En el caso predeterminado, cuando el ancho de ambos tramos es 80px, las estrellas amarillas oscurecen por completo las estrellas grises.
Pero cuando ajustamos el ancho del tramo interior, el ancho de las estrellas amarillas disminuye, revelando las estrellas grises.
En cuanto a la accesibilidad, hubiera sido más prudente dejar el número flotante dentro del intervalo interno y ocultarlo text-indent: -9999px, para que las personas con CSS desactivado al menos vieran el número de punto flotante en lugar de las estrellas.
Ojalá tuviera algún sentido.
Actualizado 2010/10/22
¡Ahora aún más compacto y más difícil de entender! También se puede exprimir hasta formar un solo revestimiento:
$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});
}
