打开使用jQuery和CSS一个数字星级显示器打开使用jQuery和CSS一个数字星级显示器(Tur

我一直在寻找的jQuery插件，并想知道如何适应该插件把一些（比如4.8618164）为4.8618164星填写的5基本上解释了许多<5成恒星填充使用jQuery一家5星级评级系统/ JS / CSS。

请注意，这将只显示/从已经可用的数量显示星评级，不接受新的评级意见。

Answer 1:

这里是你的解决方案，只用一个非常微小和简单的图像和一个自动生成span元素：

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

这可能会满足您的需求。 使用这种方法，你不必计算任意三个季度或诸如此类的东西星级宽度，只要给它一个浮点数，它会给你你的明星。

---

如何将明星们赠送小的解释可能是为了。

该脚本创建了两个块级span元素。 这两个跨度的initally获得大小80px * 16像素的和背景图像stars.png。 跨度是嵌套的，从而使跨度的结构是这样的：

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

外跨度得到一个background-position的0 -16px 。 这使得外跨度灰色星星可见。 由于外跨度有16像素的高度和repeat-x它只会显示灰色5星。

在另一方面的内跨度具有background-position的0 0这使得仅黄星可见。

这当然与两个独立的图像文件中，star_yellow.png和star_gray.png工作。 但作为明星有一个固定的高度，我们可以很容易地将它们组合成一个图像。 这是利用了CSS精灵技术 。

现在，随着跨度是嵌套的，它们会自动在彼此重叠。 在默认情况下，当这两个范围的宽度为80px，黄色星遮去灰色星。

但是，当我们调整的内跨度的宽度，黄星的宽度减小，揭示了灰色星。

辅助明智的，这本来是明智的离开浮点数内跨度内，并与隐藏text-indent: -9999px ，让人们用CSS关闭至少会看到浮点数，而不是明星。

希望这取得了一定的意义。

---

更新2010/10/22

现在，即使是更紧凑，更难以理解！ 也可以压缩到一个班轮：

$.fn.stars = function() {
    return $(this).each(function() {
        $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
    });
}

Answer 2:

如果你只需要支持现代浏览器，你可以逃脱：

• 无图像;
• 大多是静态的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> 

然后使用代码一丁点儿的一个演示：

 $(function() { function addScore(score, $domElement) { $("<span class='stars-container'>") .addClass("stars-" + score.toString()) .text("★★★★★") .appendTo($domElement); } addScore(70, $("#fixture")); }); 

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Generated: <div id="fixture"></div> 

该解决方案的最大缺点是：

1. 你所需要的元素中的恒星生成正确的宽度;
2. 有没有语义标记，如您希望将比分为元素内的文本;
3. 它仅允许尽可能多的分数，你将有类（因为我们不能使用Javascript功能来精确设置width伪元素）。

为了解决这个问题上述方案可以很容易地调整了。 的:before和:after位需要成为DOM实际元素（所以我们需要一些JS为）。

后者被留下作为读者的锻炼; Tibial。

Answer 3:

试试这个jQuery函数

<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

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

Answer 4:

为什么不只是有一个星号（空，四分之一满，半满，三季度全面和完整）的五个单独的图像，然后只需注入取决于乘以4等级的截断或rouded值的图片到你的DOM（以获取宿舍整体numner）？

举例来说，4.8618164乘以4并四舍五入为19这将是四加三季度的明星。

或者（如果你偷懒跟我一样），只是从21（0星到5星在一季度增量）选择一个图像，然后选择基于上述值的单个图像。 然后，它只是一个计算，然后在DOM中的图像变化（而不是试图改变五种不同的图像）。

Answer 5:

我最终会完全JS-自由，以避免客户端呈现滞后。 为了实现这个目标，我生成HTML这样的：

<span class="stars" title="{value as decimal}">
    <span style="width={value/5*100}%;"/>
</span>

为了帮助交通方便，我甚至在标题属性添加原料的评价值。

Answer 6:

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

Answer 7:

DEMO

你可以只用2个图像做。 1空白星，1星填充。

覆盖填在另一个的上面的图像。 并转换分级数成比例，并以此为fillter图像的宽度。

.containerdiv {
  border: 0;
  float: left;
  position: relative;
  width: 300px;
} 
.cornerimage {
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
 } 
 img{
   max-width: 300px;
 }

Answer 8:

以下是一张使用JSX和字体真棒，限制仅0.5精度，但是：

       <span>
          {Array(Math.floor(rating)).fill(<i className="fa fa-star"></i>)}
          {(rating) - Math.floor(rating)==0 ? ('') : (<i className="fa fa-star-half"></i>)}
       </span>

第一行是全明星和第二行是半星（如果有的话）

文章来源: Turn a number into star rating display using jQuery and CSS