今天研究了下簡單的評分功能，參考了下"http://www.lanxyou.info/star-rating-new-method/",感覺比較簡單易用，之后自己做了下優化處理。
先看下效果圖：
原理：橙色星寬度/父容器寬度 * 100 = 分值
功能：鼠標懸浮時，其左側星星點亮
鼠標滑過時，其左側星星點亮
鼠標點擊時，其左側星星點亮
鼠標移開后，默認記憶上次點擊的橙色星寬度
所需圖片：
實現源碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="jquery.js" type="text/javascript"></script> <title>jquery+css實現簡單評分功能</title> <style> .rating{ float:left; height:23px; width:115px; background:url('star.png') repeat-x 0 0; cursor:pointer; } .rating a{ display:block; height:100%; width:0; background:url('star.png') repeat-x 0 -23px; } #score{ float:left; margin-left:10px; font-family:'微軟雅黑'; font-size:18px; } #score em{ color:#FF6600; font-weight:bold; padding:10px; } </style> </head> <body> <div id="rating" class="rating" ><a></a></div> <div id="score"><em>0</em>分</div> <script> var rating=$('#rating'); var leftRating = rating.offset().left, width = rating.width(), clickWidth = 0; rating.mouseover(function(e){ var overWidth=parseInt(((e.pageX-leftRating)/width)*100,10); $(this).find('a').css({'width':(overWidth+'%')}); }); rating.mouseout(function(){ $(this).find('a').css({'width':(clickWidth)+'%'}); }); rating.mousemove(function(e){ var hoverWidth=parseInt(((e.pageX-leftRating)/width)*100,10); $(this).find('a').css({'width':(hoverWidth+'%')}); }); rating.click(function(e){ clickWidth=parseInt(((e.pageX-leftRating)/width)*100,10); $(this).find('a').css({'width':(clickWidth+'%')}); $('#score em').text(clickWidth); }); </script> </body> </html>