css| Dynamic | show
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);
Perhaps the above text you look a bit jerky, no relationship, let us combine CSS code to see the solution
<ul class= "Star-rating" >
<li class= "current-rating" >currently 3.5/5 stars.</li>
<li><a href= "#" title= "1 star out of 5" class= "One-star" >1</a></li>
<li><a href= "#" title= "2 stars out of 5" class= "Two-stars" >2</a></li>
<li><a href= "#" title= "3 stars out of 5" class= "Three-stars" >3</a></li>
<li><a href= "#" title= "4 stars out of 5" class= "Four-stars" >4</a></li>
<li><a href= "#" title= "5 stars out of 5" class= "Five-stars" >5</a></li>
</ul>
<style>
. star-rating{/* here is an empty layer, used to show the empty stars.
List-style:none;
margin:0px;
padding:0px;
width:150px;
height:30px;
position:relative;
Background:url (star_rating2.gif) top left repeat-x;/* the empty star is located at the upper level of the background image, setting it to the background and tile horizontally.
}
. star-rating li{/* Set the floating properties of Li * *
padding:0px;
margin:0px;
/*\*/
Float:left;
/* */
}
. star-rating Li a{/* set A's layout to absolute layout and vertical coordinates and hide the text in a to make it an empty link.
Display:block;
width:30px;
height:30px;
Text-decoration:none;
Text-indent: -9000px;
z-index:20;
Position:absolute;
padding:0px;
}
. star-rating Li a:hover{/* set a:hover background picture for the scoring star/vertical coordinates/left is 0, note that the vertical coordinates must be less than the vertical coordinates of a
Background:url (star_rating2.gif) left center;
Z-index:2;
left:0px;
}
/* The following 5 classes are used to set the location of the 5 links and the width of the hover * *
. star-rating a.one-star{
left:0px;
}
. star-rating a.one-star:hover{
width:30px;
}
. star-rating a.two-stars{
left:30px;
}
. star-rating a.two-stars:hover{
width:60px;
}
. star-rating a.three-stars{
left:60px;
}
. star-rating a.three-stars:hover{
width:90px;
}
. star-rating a.four-stars{
left:90px;
}
. star-rating a.four-stars:hover{
width:120px;
}
. star-rating a.five-stars{
left:120px;
}
. star-rating a.five-stars:hover{
width:150px;
}
. star-rating li.current-rating{/* sets the background and width of the fractional layer and hides the text * *
Background:url (star_rating2.gif) left bottom;
Position:absolute;
height:30px;
width:105px;
Display:block;
Text-indent: -9000px;
Z-index:1;
}
</style>
After reading these, I believe you should understand the principle of it, if you still do not understand can give me a message, perhaps my article is not good enough to write:
<ul class= "star-rating" > <li class= "current-rating" >currently 3.5/5 stars.</li>-<li><a href= "#" title= "1 star out of 5" class= "One-star" >1</a></li> <li><a href= "#" title= "2 star out of 5 "class=" Two-stars ">2</a></li> <li><a href=" # "title=" 3 stars out of 5 "class=" Three-stars " >3</a></li> <li><a href= "#" title= "4 stars out of 5" class= "Four-stars" >4</a></li > <li><a href= "#" title= "5 stars out of 5" class= "Five-stars" >5</a></li> </ul> <styl E>.star-rating{list-style:none;margin:0px;padding:0px;width:150px;height:30px;position:relative;background: URL (/imagelist/06/41/3igk1wwm6o16.gif) top left repeat-x; }.star-rating li{padding:0px;margin:0px;/*\*/float:left;/* */}.star-rating li A{display:block;width:30px;height: 30px;text-decoration:none;text-indent: -9000px;z-index:20;position:absolute;padding:0px}. Star-rating Li A:hover{backGround:url (/imagelist/06/41/3igk1wwm6o16.gif) left center;z-index:2;left:0px; Star-rating a.one-star{left:0px}. Star-rating a.one-star:hover{width:30px}. Star-rating a.two-stars{left:30px}. Star-rating a.two-stars:hover{width:60px}. Star-rating a.three-stars{left:60px}. Star-rating a.three-stars:hover{width:90px}. Star-rating a.four-stars{left:90px; star-rating a.four-stars:hover{width:120px; Star-rating a.five-stars{left:120px}. Star-rating a.five-stars:hover{width:150px}. Star-rating Li.current-rating{background:url (/imagelist/06/41/3igk1wwm6o16.gif) left Bottom;position:absolute; Height:30px;width:105px;display:block;text-indent: -9000px;z-index:1;} </style>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]