这里有一个解决方案,只使用一个非常小而简单的图像和一个自动生成的span元素:
CSSspan.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;}
图片
注意:千万不要热链接上面的图像!将文件复制到您自己的服务器并从那里使用它。
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 = $('').width(size);
// Replace the numerical value with stars
$(this).html($span);
});}
如果要将星形限制为仅一半或四分之一星大小,请在行前添加以下行之一var size:val = Math.round(val * 4) / 4; /* To round to nearest quarter */val = Math.round(val * 2) / 2; /* To round to nearest half */
HTML4.86181642.65453440.53558
用法$(function() {
$('span.stars').stars();});
产量
演示
这可能会满足您的需求。使用这种方法,您不必计算任何三分之一或任何星形宽度,只需给它一个浮点数,它就会给你你的星星。
关于星星如何呈现的一个小解释可能是有序的。
该脚本创建两个块级跨度元素。两个跨度最初的尺寸为80px * 16px,背景图像为stars.png。跨度是嵌套的,因此跨度的结构如下所示:
外跨度得到了background-position的0 -16px。这使得外跨度中的灰色星可见。由于外跨度高度为16px repeat-x,因此只显示5颗灰星。
在另一方面内宽度具有background-position的0 0,这使得只有黄色星星可见。
这当然适用于两个独立的图像文件,star_yellow.png和star_gray.png。但由于恒星具有固定的高度,我们可以轻松地将它们组合成一个图像。这利用了CSS精灵技术。
现在,当跨度嵌套时,它们会自动叠加在一起。在默认情况下,当两个跨度的宽度为80px时,黄色星星完全遮蔽灰色星星。
但是当我们调整内跨的宽度时,黄色恒星的宽度会减小,从而显示出灰色的恒星。
可访问性方面,将浮点数保留在内部跨度内并将其隐藏起来会更明智text-indent: -9999px,因此关闭CSS的人至少会看到浮点数而不是星号。
希望这有点道理。
现在更紧凑,更难理解!也可以挤到一个衬里:$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});}