< html > |
02 | < head >< title >JQuery星星评级</ title >< meta http-equiv = "Content-Type" content = "text/html; charset=gbk" /> |
03 | < script src = "http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type = "text/javascript" ></ script > |
04 | < style type = "text/css" > |
05 | <!-- |
06 | .star_rating {background:url(http://static.oschina.net/uploads/space/2011/0711/114922_gGrF_101311.gif) -80px 0 no-repeat; padding:0;margin:0; width:80px; height:16px; float:left; position:relative; } |
07 | .star_rating li {padding:0;margin:0;float:left;width:16px;height:16px;} |
08 | --> |
09 | </ style > |
10 | </ head >< body > |
11 | < div style = "display:block; float:left;width:100px;" >< span >*</ span > 总体评价:</ div > |
12 | < ul class = "star_rating" >< li />< li />< li />< li />< li /></ ul > |
13 | |
14 | < script type = "text/javascript" > |
15 | $('.star_rating li').each(function(){ |
16 | $(this).click(function(obj){ |
17 | $('.star_rating li').unbind(); |
18 | var Too = (obj.srcElement.offsetLeft+16); |
19 | setStarPos(Too-80); |
20 | alert((Too/16)+'星'); |
21 | }).mouseover(function(obj){ |
22 | setStarPos((obj.srcElement.offsetLeft+16)-80); |
23 | }).mouseout(function(obj){ |
24 | setStarPos('-80'); |
25 | }); |
26 | }); |
27 | function setStarPos(le){ |
28 | $('.star_rating').css({'backgroundPosition':le+'px 0'}); |
29 | }; |
30 | </ script ></ body ></ html > |