html 星级显示,使用jQuery和CSS将数字转换为星级评分显示

这里有一个解决方案，只使用一个非常小而简单的图像和一个自动生成的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));

});}