星级评分系统（jQuery）

Question

我猜您对网站上经常用来对商品进行评级的5星评级系统很熟悉吗？ 当我在Google上搜索时，只有使用Sprites等的jQuery插件。如何制作具有12张图像（0、0.5、1、1.5等）的星级评分系统？

我要这样做是因为我已经有了图像，并且要编辑它们需要大量的工作。

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
function setRating(number)
{
    jQuery('#main').css('background','url(images/'+number+'-star.gif) no-repeat');       
}

function saveRating(number)
{
    jQuery('.rating').attr('onmouseout','setRating(\''+number+'\')');
    alert(number);        
}
</script>
<style>
.rating
{
    width:8px;
    height:16px;
    float:left;    
}
#main
{
    width:80px; 
    height:16px;    
}
</style>
<div id="main" style="background:url(images/1.0-star.gif) no-repeat;">
    <div class="rating" onmouseover="setRating('0.5')" onclick="saveRating('0.5');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('1.0')" onclick="saveRating('1.0');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('1.5')" onclick="saveRating('1.5');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('2.0')" onclick="saveRating('2.0');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('2.5')" onclick="saveRating('2.5');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('3.0')" onclick="saveRating('3.0');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('3.5')" onclick="saveRating('3.5');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('4.0')" onclick="saveRating('4.0');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('4.5')" onclick="saveRating('4.5');" onmouseout="setRating('1.0')"></div>
    <div class="rating" onmouseover="setRating('5.0')" onclick="saveRating('5.0');" onmouseout="setRating('1.0')"></div>
</div>

这就是我想要的。

Answer 2

您是否找到了我对同一问题的旧答案？

使用jQuery和CSS将数字转换为星级显示

图像很简单，将现成的图像转换成该图像应该没有问题。

另外，插件本身非常简单，您应该能够轻松了解其内部运作方式，以适应自己的需求。 当前，该插件仅处理星星的显示，而不是实际选择，但将其转换成这样的字母应该不难。

Answer 3

有大量 的 精灵 发电机 在那里 ，这将产生的CSS和你的精灵形象。 :)

Answer 4

Nettuts的这篇文章可能是您想要的：

http://net.tutsplus.com/tutorials/html-css-techniques/building-a-5-star-rating-system-with-jquery-ajax-and-php/