js implements simple star selector submission effect suitable for comments, etc. _javascript skills

Star selector, submission code is suitable for comments, etc.

No js library is used, it is a separate js code

Copy Code The code is as follows:

Service

• 
  < ;input type="text" name="serve" value="" />
  


• default level

< ;li>1

• 2


• 3


• 4
  
• 5

< ;/ul>


Price





• 
  < ;input type="text" name="price" value="" title="If it is set to 2 here, it means that 2 stars will be bright by default. " />
  


• default level


• 1




• 3
• 4


• < a href="#" title="5 of 5 stars" class="five_stars">5





Quality




• 
  
  


• default level


• 1




• 3
• 4


• < a href="#" title="5 of 5 stars" class="five_stars">5

Copy code The code is as follows:

复制代码 代码如下:

body{font-size:12px;}
ul{padding:0;margin:0;}
/*star.css*/
.star_rating {list-style:none;margin:-1px 0 0 -1px; padding:0; width:70px; height:12px; position:relative; background:url(rating_stars.gif) 0 0 repeat-x; overflow:hidden;font-size:0;}
.star_rating li{padding:0;margin:0;float:left;}
.star_rating li a{display:block;width:14px;height:12px;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding:0;margin:0;}
.star_rating li a:hover{background:url(rating_stars.gif) 0 12px;z-index:2;left:0;}
.star_rating a.one_star{left:0;}
.star_rating a.one_star:hover{width:14px;}
.star_rating a.two_stars{left:14px;}
.star_rating a.two_stars:hover{width:28px;}
.star_rating a.three_stars{left:28px;}
.star_rating a.three_stars:hover{width:42px;}
.star_rating a.four_stars{left:42px;}
.star_rating a.four_stars:hover{width:56px;}
.star_rating a.five_stars{left:56px;}
.star_rating a.five_stars:hover{width:70px;}
.star_rating li.current_rating{background:url(rating_stars.gif) 0 24px;position:absolute;height:12px;display:block;text-indent:-9000px;z-index:1;left:0;}
/*end star.css*/
#star_level{margin:0 0 20px 20px;}
#star_level p{margin:20px 0 5px 0;}