使用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; } 

图片

替代文字http://www.ulmanen.fi/stuff/stars.png

注意: 不要热链接到上面的图片! 将文件复制到您自己的服务器并从那里使用它。

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

演示

http://www.ulmanen.fi/stuff/stars.php

这可能会适合您的需求。 用这种方法,你不必计算任何四分之一或者不是星形的宽度,只要给它一个浮点数就可以给你星星。


关于如何呈现恒星的小解释可能是有序的。

该脚本创build两个块级span元素。 这两个跨度初始地获得80px * 16px的大小和背景图像stars.png。 跨度是嵌套的,所以跨度的结构如下所示:

 <span class="stars"> <span></span> </span> 

外部跨度获得0 -16pxbackground-position 。 这使得外部跨度中的灰色星星可见。 由于外部跨度的高度为16px,而repeat-x ,则只会显示5个灰色星星。

另一方面,内部跨度具有0 0background-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

你可以在http://fontawesome.io/下载FontAwesome

为什么不只是有一个恒星的五个独立的图像(空,四分之一,半满,三分之一满和满),然后只是注入图像到您的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; }