5

嗨，我有 5 星评级系统，我想做它，这样我就可以添加 4.3 星而不是 4 星。我该怎么做？我当前的代码如下：

<center>
  <span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
  <span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
  <span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
  <span class="glyphicon glyphicon-star" style="color:#BBD41C"></span>
  <span class="glyphicon glyphicon-star"></span>
</center>
4

5 回答 5

6

您可以重叠 2 个绝对定位的 div。每个将包含所有 5 颗星。然后顶部 div 可能有一个 overflow:hidden div 在其中，您将宽度设置为等于百分比（基于评级）。

这是我放在一起的一个代码笔来说明它：http ://codepen.io/anon/pen/ogBWwX下面复制了代码片段以供参考，并包含一些超出所需的内容，用于演示。

HTML：

<div class="container">
  <div class="flt_left">
    <form id="star_form">
      <label for="star_input">Stars:</label>
      <input type="text" id="star_input" />
      <button id="setStars">Set Rating</button>
    </form>
  </div>
  <div class="flt_left">
    <div id="star_box">
      <div class="star_limiter">
        <div class="longbar">
          <span class="glyphicon glyphicon-star"></span>
          <span class="glyphicon glyphicon-star"></span>
          <span class="glyphicon glyphicon-star"></span>
          <span class="glyphicon glyphicon-star"></span>
          <span class="glyphicon glyphicon-star"></span>
        </div>
      </div>
    </div>
    <div class="star_bg">
      <span class="glyphicon glyphicon-star"></span>
      <span class="glyphicon glyphicon-star"></span>
      <span class="glyphicon glyphicon-star"></span>
      <span class="glyphicon glyphicon-star"></span>
      <span class="glyphicon glyphicon-star"></span>
    </div>
  </div>
  <div style="clear:both;"></div>
  <p id="rating_data"></p>
</div>

CSS：

.container{
  padding: 15px;
  margin: 10px;
}
p{
  margin: 10px 0;
}
.flt_left{
  float: left;
  margin-right: 10px;
  position: relative;
  /*min-width: 250px;*/
}
#star_box,
.star_bg{
  color: #BBD41C;
  position: absolute;
  margin: 4px 0;
  top: 0;
  left: 0;
  display: table;
}
.glyphicon{
  display: table-cell;
  padding: 0 0 0 2px;
  font-size: 18px;
}
#star_box{
  z-index: 2;
}
.star_bg{
  color: #555;
}
#star_box .star_limiter{
  width:100%;
  overflow: hidden;
  position: relative;
}

Javascript：

function setWidth(perc){
  $('#star_box .star_limiter').css('width',perc+'%');
}
function starToPercent(amt,outof){
  if(typeof outof == 'undefined') outof = 5;
  var percent = Math.round(amt*100/outof);
  if(percent > 100) percent = 100;
  $('#rating_data').text(amt+' of '+outof+' stars, or '+percent+'%');
  setWidth(percent);
}
function setRating(){
  var input = parseFloat($('#star_input').val());
  var num_stars = $('#star_box .star_limiter .glyphicon-star').length;


  if(!isNaN(input)) starToPercent(input, num_stars);
}

$(document).ready(function(){
  var star_width = $('#star_box').width();
  var star_height = $('#star_box').height();
  $('#star_box').css('width',star_width+'px');
  $('#star_box .star_limiter').css('height',star_height+'px');
  $('#star_box .longbar').css('width',star_width+'px');
  
  $('#setStars').click(setRating);
  $('#star_form').submit(function(e){
    e.preventDefault();
    setRating();
  });
});

注释： 重叠的星星看起来不太好，因为您在边缘看到了一些背景星星的颜色。所以，如果你去掉背景星星而只使用纯色，它看起来会更好。颜色越匹配，它也就越不明显。

我将 glyphicons 的 CSS 设置为 display:table-cell 以防止它们环绕并将它们放置得更近。星星之间的更多空间会在浮点数上产生不太准确的结果。

于 2015-01-08T19:23:59.783 回答
4

你不能在一个图标字体上使用多种颜色，所以你问的是不可能的。您可以使用部分背景填充，但这似乎不太理想。

如果您切换到Font Awesome，您至少可以使用半星符号。

于 2014-01-30T21:59:17.777 回答
3

我发现这很有效，主要缺点是您需要根据字体大小设置特定类的样式：

HTML：

 <i class="glyphicon glyphicon-star"></i>
 <i class="glyphicon glyphicon-star"></i>
 <i class="glyphicon glyphicon-star"></i>
 <i class="glyphicon glyphicon-star"></i>
 <i class="glyphicon glyphicon-star half-star"></i>

CSS：

.half-star {
        width:5px; // Roughly half the font size
        overflow:hidden;
 }
于 2015-11-07T05:35:59.517 回答
1

虽然这些答案都是正确的（关于多种颜色），而且很长而且可能过于精确（重叠的 div，它使用像素来移动东西），但我刚刚发现了一个很棒的技巧，涉及 :after 选择器。

基本上，如果您知道背景颜色将是什么，您可以通过这种方式覆盖一半（或您需要的任何百分比）字符：

HTML：

     <span class="glyphicon glyphicon-star"></span>
     <span class="glyphicon glyphicon-star"></span>
     <span class="glyphicon glyphicon-star"></span>
     <span class="glyphicon glyphicon-star"></span>
     <span class="glyphicon glyphicon-star half-star"></span>`

CSS：

   .half-star {
     letter-spacing: -0.5em;
       &:after {
       position: absolute;
       content: "";
       left: 0.5em;
       width: 0.5em;
       height: 1em;
       background-color: $body-bg;
     }
   }

首先，我将字母间距设置为字体默认值的一半，这样可以正确对齐以下文本、星号或其他元素。然后，我创建了一个绝对定位的块，$body-bg其宽度为星星的一半，位于星星的一半（这是 4.5 星评级）。您可以更改该小数以匹配您想要的评级。

您无法更改字形的颜色，并且在第一个颜色或字形上添加不同的颜色或字形需要更多的黑客攻击（与我展示的方式相同，但从另一个方向思考）但它可以在没有任何 Javascript 的情况下完成并且纯粹以这种方式使用 HTML 和 CSS。

于 2015-01-20T01:39:47.973 回答
1

Font-awesome 有一个现成的星系统解决方案：在他们的网站上查看“Star Ratings (inspired by CSS Tricks)”

于 2015-03-24T22:19:54.870 回答