With pure CSS to create star rating effect is increasingly used in the network Ria, combined with Ajax technology, can render a very good visual effects and great user experience, before this article began, we can first go to Cssheaven feel.
Recently because of the project needs, I found a lot of CSS star rating on the internet examples and instructions, but found that most of the articles are translated abroad, and explain is not very clear, so I decided to do a summary of their own, but also hope to give you some help.
First of all, write in Chinese the algorithm of this effect:
1. Use the location of the background image switch to get the star effect;
2. The whole effect of the most critical place is "three-layer theory", the entire effect is divided into three layers--empty layer, fractional layer and scoring layer, three-storey layout is absolute, to avoid the UL itself with the relative layout (of course, with DIV can also achieve the same effect);
3. Empty layering is to use the background image of "empty Star" as the background, and tile horizontally;
4. The width of the fractional layer is equal to the value obtained by the (score * picture width) and is tiled horizontally using the "fractional Star (yellow in example)" in the background image;
5. Playing a hierarchy is to place 5 empty links in the 5-star position (width to match the background picture) and set the 5 a:hover background to "Point Star (here is green)", with a width of stars * Picture width, left 0 This combines a:hover different widths to show the scoring effect, and the vertical coordinates are less than the vertical coordinates of a (to ensure that the current a:hover does not block other links);
Current 1/2 page
12 Next read the full text
