logo标签列表

自动生成星级评分？

phpjqueryhtml
4
我正在尝试找到一种将1-5的数字转换为星级评分的方法，该方法还可以包含小数，例如4.3或3.34，并且非常精确（例如在Amazon.com上）。 评分不必是可用的，它只需要是一个静态图像。 有任何帮助吗？
我愿意使用PHP或jQuery，以满足需求。
你是想要显示还是生成这个数字？请更具体地说明。 - Flipper
亚马逊只显示全/半星评分。他们使用一个精灵，其中包含两个相关部分：一个有5个填充段的十星部分，以及一个有4.5个填充段的十星部分。他们定位背景图像，以便显示一定数量的完整段，并根据是否有半颗星来选择使用哪个部分。 - theazureshadow
5个回答
5
您可以创建一个白色背景，带有透明的星形剪影的图片。然后将其放置在给定长度的黄色div上方。假设您的图像宽度为100px。如果您有3颗星级评价，您将使黄色div的宽度为100 *（3/5），其中3颗星将被填充。
编辑： 类似的想法。您可以拥有一张带有所有5颗星的图片。将此图像放置在带有overflow:hidden的div中。然后您设置div的宽度与上述方式相同。div越小，看到的星星就越少。
编辑2： 仅供娱乐的演示。 http://jsfiddle.net/qFMyC/
3
2
0

我希望你的意思是将1-5的值转换为实际的星星表示。

这取决于你想要多细致，我认为亚马逊的精度到小数点后一位（0.1），这可能是在服务器端完成的，以节省客户端负载并利用缓存图像；但也可以在客户端完成。

@kingjiv提供了一个很好的客户端解决方案，但对于服务器端：

如果您不太担心精度，您可以创建11个图像0、0.5、1、1.5等，并将该值传递到图像src属性中。这将提供正确的图像，并且它们会被很好地缓存以便在页面上重复使用。

如果你想做得更精细，你可以在代码中服务端创建它们，并在每次准备好快速提供之前将它们缓存。使用这种方法，您可以根据自己的喜好进行任何精度的操作。

对于PHP，我建议查看Imagik

0
过去我所做的是创建两个div并将它们叠放在一起。
在底部的 div 上，您将宽度设置为 5 颗星的宽度。因此，如果您的星星宽度为50px，则底部 div 宽度为250px。
在顶部的 div 上，您使用相同的星星但不同颜色。然后，您可以在 php 或 javascript 中将该 div 的宽度设置为 50 * $decimalStarRating。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接