Question

我有一个表单，用户可以对产品进行评分，我需要在视觉上显示星级。我需要根据我从数据库中检索的评级值，为每个用户以及整体平均值对星星进行着色。

例如，用户A给出了5星评级，而用户B仅给出3星评级。当我显示用户A的评级时，我必须为所有5颗星上色，但是当我显示用户B的评级时，我必须只为3颗星上色。这意味着我必须为星星动态着色。

我在大多数网站上也看到过，当显示平均评分时，他们已经看到了明星评分以半星结束的明星的一半。我也想这样做。

我的显示器不需要包含悬停功能。

我的问题是如何根据计算出的平均值或从数据库中提取的评级为星星着色。

我在我的项目中使用了codeigniter。

感谢您的帮助： - ）

Answer 1

将一个元素嵌套在另一个元素中外有空星的背景图像内部width:具有彩色星形的背景图像，以及在布局页面时以编程方式设置的width:60.0%元素。例如，span.rating-frame, span.rating-fill { background: url(../star.png) 0 -16px repeat-x; display: block; width: 80px; /* this is 5 times the width of the star, for 5 stars total */ height: 16px; } span.rating-fill { background-position: 0 0; /* use the (filled-in) version from the top of the image */ }可用于3/5星评级。

对于小型优化，您甚至可以使用仅为一颗星的图像开始，并使用repeat-x来获取所有5颗星。您还可以拥有一个垂直包含彩色和填充星形的图像，并在显示时间裁剪以确定您引用的星形版本。

示例1：

例如，请考虑以下CSS：

Average Rating: 4/5
<span class="rating-frame">
      <span style="width:80.0%;" class="rating-fill"> </span>
</span>

User A:  5/5
<span class="rating-frame">
      <span style="width:100.0%;" class="rating-fill"> </span>
</span>

User B: 3/5
<span class="rating-frame">
      <span style="width:60.0%;" class="rating-fill"> </span>
</span>

以及以下HTML：

userRating/maxPossibleRating

这假设star.png是16x32图像，顶部填充了星号 width属性的值由averageUserRating/maxPossibleRating设置四舍五入到适当的精度。当然，在显示总体平均评分的位置，它由☆设置。

示例2：

OP报告使用for (i = 1 to rating inclusive) { print "★" } //if including a half-star, replace this comment with the code to do so. for (i = rating+1 to maxRating inclusive) { print "☆" }代替。以下伪代码可能有助于页面生成。

   <span class="display-text-rating">3.7 stars</span>
   <div class="star-rating-section" title="3.7 out of 5 stars">
     <span class="star-rating" role="img" aria-label="3.7 stars">
         <i class="fullStar"></i>
         <i class="fullStar"></i>
         <i class="fullStar"></i>
         <i class="midStar"></i>
         <i class="emptyStar"></i>
      </span>
    </div>

但除非你有一个半满的星形角色，否则你将无法在输出中使用它。您可以尝试使用½字符。

示例3：

eBay示例OP链接到使用这样的源：

#include "inet/common/INETDefs.h"
#include "inet/networklayer/contract/IInterfaceTable.h" 

import inet.networklayer.configurator.ipv4.IPv4NetworkConfigurator;
import inet.node.inet.INetworkNode;

第一行是以文本形式显示评级的印刷文本 div标题显示有关鼠标悬停的信息跨度内的元素w / class属性可以很容易地以编程方式生成，如示例2所示。可以将CSS设置为使用fullStar，midStar和emptyStar的不同图像。可以在用户个人评级所在的部分中为每个用户重复此生成过程。

示例3的缺点是在视觉上四舍五入到最近的半星（和示例2，到全星），而示例1允许更细粒度的分数星的区分，而无需额外的编程或图像创建确定适当的舍入级别是UX.SE的一个问题（如果有人关心它，请在此处编辑链接）。

如何在星级中动态为星星着色？

1 个答案:

示例1：

示例2：

示例3：