使用jQuery和CSS将数字转换为星级显示
我一直在寻找jQuery的插件，并想知道如何适应该插件将一个数字（如4.8618164）变成一个4.8618164星星填写满分为5.基本上解释一个数字<5成星星填写在一个5星评级系统使用jQuery / JS / CSS。
请注意，这只会显示/显示已有号码的星级评分，不接受新的评分提交。
这里有一个解决scheme，只使用一个非常微小和简单的图像和一个自动生成的跨度元素：
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; } 图片
注意： 不要热链接到上面的图片！ 将文件复制到您自己的服务器并从那里使用它。
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); }); }
如果要将星星限制为仅星形大小的一半或四分之一，请在var size行之前添加以下行之一：
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>
用法
$(function() { $('span.stars').stars(); });
产量
图片来自赋格图标集（www.pinvoke.com）http://www.ulmanen.fi/stuff/stars_output.png
演示
这可能会适合您的需求。 用这种方法，你不必计算任何四分之一或者不是星形的宽度，只要给它一个浮点数就可以给你星星。
关于如何呈现恒星的小解释可能是有序的。
该脚本创build两个块级span元素。 这两个跨度初始地获得80px * 16px的大小和背景图像stars.png。 跨度是嵌套的，所以跨度的结构如下所示：
<span class="stars"> <span></span> </span>
外部跨度获得0 -16px的background-position 。 这使得外部跨度中的灰色星星可见。 由于外部跨度的高度为16px，而repeat-x ，则只会显示5个灰色星星。
另一方面，内部跨度具有0 0的background-position ，这使得只有黄色的星星可见。
这当然可以使用两个独立的imagefiles，star_yellow.png和star_gray.png。 但是，因为恒星的高度是固定的，所以我们可以很容易地将它们组合成一个图像。 这使用CSS精灵技术 。
现在，跨度嵌套，它们自动覆盖在彼此之上。 在默认情况下，当两个宽度都是80px时，黄色的星星完全遮住了灰色的星星。
但是，当我们调整内跨的宽度时，黄星的宽度减小，显示出灰星。
通过辅助function，将浮点数保留在内部跨度内并用text-indent: -9999px隐藏浮点数是更明智的text-indent: -9999px ，这样closuresCSS的人至less可以看到浮点数而不是星号。
希望这是有道理的。
更新2010/10/22
现在更加紧凑，更难理解！ 也可以挤到一个class轮：
$.fn.stars = function() { return $(this).each(function() { $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16)); }); }
如果你只需要支持现代浏览器，你可以逃避：
- 没有图像;
- 大多是静态的CSS;
- 几乎没有jQuery或Javascript;
你只需要把数字转换成一个class ，例如class='stars-score-50' 。
首先是“渲染”标记的演示：
body { font-size: 18px; } .stars-container { position: relative; display: inline-block; color: transparent; } .stars-container:before { position: absolute; top: 0; left: 0; content: '★★★★★'; color: lightgray; } .stars-container:after { position: absolute; top: 0; left: 0; content: '★★★★★'; color: gold; overflow: hidden; } .stars-0:after { width: 0%; } .stars-10:after { width: 10%; } .stars-20:after { width: 20%; } .stars-30:after { width: 30%; } .stars-40:after { width: 40%; } .stars-50:after { width: 50%; } .stars-60:after { width: 60%; } .stars-70:after { width: 70%; } .stars-80:after { width: 80%; } .stars-90:after { width: 90%; } .stars-100:after { width: 100; }
Within block level elements: <div><span class="stars-container stars-0">★★★★★</span></div> <div><span class="stars-container stars-10">★★★★★</span></div> <div><span class="stars-container stars-20">★★★★★</span></div> <div><span class="stars-container stars-30">★★★★★</span></div> <div><span class="stars-container stars-40">★★★★★</span></div> <div><span class="stars-container stars-50">★★★★★</span></div> <div><span class="stars-container stars-60">★★★★★</span></div> <div><span class="stars-container stars-70">★★★★★</span></div> <div><span class="stars-container stars-80">★★★★★</span></div> <div><span class="stars-container stars-90">★★★★★</span></div> <div><span class="stars-container stars-100">★★★★★</span></div> <p>Or use it in a sentence: <span class="stars-container stars-70">★★★★★</span> (cool, huh?).</p>
试试这个jQuery的function
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> <span class="stars" data-rating="4" data-num-stars="5" ></span> <script> $.fn.stars = function() { return $(this).each(function() { var rating = $(this).data("rating"); var numStars = $(this).data("numStars"); var fullStar = new Array(Math.floor(rating + 1)).join('<i class="fa fa-star"></i>'); var halfStar = ((rating%1) !== 0) ? '<i class="fa fa-star-half-empty"></i>': ''; var noStar = new Array(Math.floor(numStars + 1 - rating)).join('<i class="fa fa-star-o"></i>'); $(this).html(fullStar + halfStar + noStar); }); } $('.stars').stars();
FontAwesome CSS
为什么不只是有一个恒星的五个独立的图像（空，四分之一，半满，三分之一满和满），然后只是注入图像到您的DOM取决于截断或rouded的价值乘以4（得到一个完整的季度数）？
例如，4.8618164乘以4，四舍五入为19，即四四星。
另外（如果你像我一样懒），只需从21（0到5星以四分之一增量）中select一个图像，并根据上述值select单个图像。 然后，这只是一个计算，然后在DOM中进行图像更改（而不是试图更改五个不同的图像）。
我最终完全没有JS，以避免客户端渲染滞后。 为了做到这一点，我生成这样的HTML：
<span class="stars" title="{value as decimal}"> <span style="width={value/5*100}%;"/> </span>
为了提高可访问性，我甚至在title属性中添加了原始评分值。
使用没有原型的jquery，更新js代码
$( ".stars" ).each(function() { // Get the value var val = $(this).data("rating"); // 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); });
我还通过跨度中的数据分级名称添加了一个数据属性。
<span class="stars" data-rating="4" ></span>
DEMO
你只能用2张图片来做。 1颗空白星星，1颗星星。
在另一个顶部叠加填充图像。 并将评级数字转换为百分比，并将其用作填充图像的宽度。
.containerdiv { border: 0; float: left; position: relative; width: 300px; } .cornerimage { border: 0; position: absolute; top: 0; left: 0; overflow: hidden; } img{ max-width: 300px; }
;){kind=link}
;){kind=link}