今天研究了下简单的评分功能，参考了下"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:100%; 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>
