星级评分系统（jQuery）

我猜你对5星级评分系统非常熟悉，这个评分系统经常用于网站评分项目？当我在谷歌上看，只有jQuery插件使用精灵等。我如何使用12张图像（0,0.5,1,1.5等）制作星级评分系统？星级评分系统（jQuery）

我想这样做，因为我已经得到了图像，这是一个大量的工作，对它们进行编辑。

2010-12-04 Simon

（比适应一个jQuery插件的代码可能更少的工作，你不知道它是如何工作） – Gareth 2010-12-04 13:01:49

<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>

这就是我一直在寻找。

来源

2010-12-04 13:48:38 Simon

这是好简单的解决方案，但如何解决图像延迟加载的问题？提前致谢 – levi 2012-08-14 09:48:25