Question

我猜你是否熟悉5星评级系统，这些系统经常在网站上用于评级项目？当我在谷歌上看时，只有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

您是否找到了有关同一问题的旧答案？

Turn a number into star rating display using jQuery and CSS

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

此外，插件本身非常简单，您应该能够轻松地了解其内部工作方式，以使其适应您自己的需求。目前，插件只处理星星的显示，而不是实际选择，但不应该很难将其转换为此类。

Answer 3

plenty of sprite generators out there会为您生成css和精灵图像。：）

Answer 4

Nettuts的这篇文章可能正是您所寻找的：

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

星级评分系统（jQuery）

4 个答案: