javascript - Star Rating System (jQuery) - Stack Overflow

admin管理员组

文章数量:1405884

I guess you're familiar with the 5 stars rating system that's often used on sites to rated items? When I was looking on google, there were only jQuery plugins that are using sprites etc. How can I make a star rating system with 12 images (0,0.5,1,1.5 etc.)?

I want to do this because I've got the images and it's a lot of work to edit them.

I guess you're familiar with the 5 stars rating system that's often used on sites to rated items? When I was looking on google, there were only jQuery plugins that are using sprites etc. How can I make a star rating system with 12 images (0,0.5,1,1.5 etc.)?

I want to do this because I've got the images and it's a lot of work to edit them.

• javascript
• jquery

Share Improve this question Follow edited Sep 16, 2013 at 19:36 Kara 6,2261616 gold badges5353 silver badges5858 bronze badges asked Dec 4, 2010 at 12:58 SimonSimon 5,70066 gold badges5454 silver badges8686 bronze badges 1

• 4 (probably less work than adapting the code of a jQuery plugin which you don't know how it works) – Gareth Commented Dec 4, 2010 at 13:01

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

<script src="https://ajax.googleapis./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>

This is what I was looking for.

Did you find my old answer regarding the same issue?

Turn a number into star rating display using jQuery and CSS

The images are simple, you should have no problem converting your ready made images to that.

Also the plugin itself is very simple, and you should be able to understand its inner workings easily to adapt it to your own needs. Currently the plugin handles only showing of the stars, not actually selecting, but shouldn't be hard to convert it to such.

There are plenty of sprite generators out there which will generate the css and the sprite image for you. :)

Nettuts has this article that might be what you are looking for:

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

本文标签： javascriptStar Rating System (jQuery)Stack Overflow