概述：
電商網站中的訂單一般都允許評價，比如質量評價和服務評價等，頁面上以星星多少表示評價的高低。
（以下截圖來源於京東）
本文基於自己的理解和實現“五星級評價”，供參考。
----------------------------------------------------------------------------
前期准備：
從京東訂單頁面中拷貝了一個圖片，此處命名為star-s.png。
圖片star-s.png：
圖片分析：
像素160×15px，包含5個滿星和5個空星，每個星星的像素都是15×15px，左對齊，最右邊留有15×15px的空白（暫時沒理解這片空白區域的用途）。
----------------------------------------------------------------------------
第一部分：靜態得分呈現
功能：
已評價的訂單顯示出具體的星級得分。
實現方式：
評價區域的div尺寸為75×15px，將背景圖片設置為star-s.png，div區域正好顯示五顆星。
星級的不同完全取決於圖片的background-position-x值，以15px為單位，初始值設置為-75px時，頁面顯示出來的是空星，即得分是零顆星。如果得分設置為一顆星，則將圖片右移15px，即background-position-x的值增加15px至-60px。其他星級得分以此類推。
具體代碼：
將不同的星級參數background-position-x值以類名區分，不同的星級得分設置為具體的類名即可。
（樣式代碼）
1 /*星級圖片區域div的樣式*/ 2 .star-s 3 { 4 display:inline-block; 5 height:15px; 6 width:75px; 7 background-image:url("star-s.png"); 8 } 9 /*零顆星的樣式*/ 10 .s0 11 { 12 background-position-x:-75px; 13 } 14 /*一顆星的樣式*/ 15 .s1 16 { 17 background-position-x:-60px; 18 } 19 /*兩顆星的樣式*/ 20 .s2 21 { 22 background-position-x:-45px; 23 } 24 /*三顆星的樣式*/ 25 .s3 26 { 27 background-position-x:-30px; 28 } 29 /*四顆星的樣式*/ 30 .s4 31 { 32 background-position-x:-15px; 33 } 34 /*五顆星的樣式*/ 35 .s5 36 { 37 background-position-x:0px; 38 }
（HTML代碼）
1 零顆星<div class="star-s s0"></div><br/> 2 一顆星<div class="star-s s1"></div><br/> 3 兩顆星<div class="star-s s2"></div><br/> 4 三顆星<div class="star-s s3"></div><br/> 5 四顆星<div class="star-s s4"></div><br/> 6 五顆星<div class="star-s s5"></div>
（呈現效果）
第二部分：動態實現評價得分
功能：
未評價的訂單允許用戶通過鼠標點擊星級圖片給訂單打分。
實現方式：
由於星級圖片的呈現區域大小固定，鼠標進入該區域后需要獲取到鼠標相對於該區域左側的距離，根據該距離與15px的關系，動態調整該div的類名以實現星級圖片的改變。
監控每個星級區域div的mousemove事件，獲取該事件的參數e，e.offsetX表示鼠標距離該div左側的距離。根據e.offsetX/15得到的整數來確定當前鼠標所處的星級。
具體代碼：
封裝一個公用函數，傳入星級圖片所在div的id，返回鼠標點擊星級圖片后的分數值（默認得分為1分，可自設）。
（HTML代碼）
1 質量評價<div id="quality" class="star-s"></div><br/> 2 服務評價<div id="service" class="star-s"></div>
（JavaScript代碼）
1 /*封裝函數*/ 2 function StarComment(eleID) { 3 var starValue = 1; 4 var tar = $("#" + eleID)[0]; 5 var dealMousemove=function(e) { 6 var that = e; 7 console.log(e.offsetX); 8 starValue = parseInt(e.offsetX / 15) + 1; 9 tar.className = "star-s s" + starValue.toString(); 10 console.log(tar.className); 11 } 12 $(tar).bind("mousemove", function (e) { 13 dealMousemove(e); 14 }); 15 $(tar).bind("click", function () { 16 $(tar).unbind("mousemove") 17 }); 18 19 /*開放接口函數：返回div的星級分數*/ 20 this.getStarValue=function(){ 21 return starValue; 22 } 23 } 24 25 /*根據需要初始化指定的div，給其賦予星級得分功能*/ 26 var starQuality = new StarComment("quality"); 27 var starService = new StarComment("service");
（呈現效果）
完整代碼附后：
1 <html> 2 <head> 3 <script src="jquery-1.9.1.js"></script> 4 <script src="jquery-1.9.1.min.js"></script> 5 <style type="text/css"> 6 .star-s 7 { 8 display:inline-block; 9 height:15px; 10 width:75px; 11 background-image:url("star-s.png"); 12 } 13 .s0 14 { 15 background-position-x:-75px; 16 } 17 .s1 18 { 19 background-position-x:-60px; 20 } 21 .s2 22 { 23 background-position-x:-45px; 24 } 25 .s3 26 { 27 background-position-x:-30px; 28 } 29 .s4 30 { 31 background-position-x:-15px; 32 } 33 .s5 34 { 35 background-position-x:0px; 36 } 37 38 </style> 39 </head> 40 <body> 41 <div > 42 零顆星<div class="star-s s0"></div><br/> 43 一顆星<div class="star-s s1"></div><br/> 44 兩顆星<div class="star-s s2"></div><br/> 45 三顆星<div class="star-s s3"></div><br/> 46 四顆星<div class="star-s s4"></div><br/> 47 五顆星<div class="star-s s5"></div> 48 </div> 49 <div > 50 質量評價<div id="quality" class="star-s"></div><br/> 51 服務評價<div id="service" class="star-s"></div> 52 </div> 53 54 <script type="text/javascript"> 55 56 function StarComment(eleID) { 57 var starValue = 1; 58 var tar = $("#" + eleID)[0]; 59 var dealMousemove=function(e) { 60 var that = e; 61 console.log(e.offsetX); 62 starValue = parseInt(e.offsetX / 15) + 1; 63 tar.className = "star-s s" + starValue.toString(); 64 console.log(tar.className); 65 } 66 $(tar).bind("mousemove", function (e) { 67 dealMousemove(e); 68 }); 69 $(tar).bind("click", function () { 70 $(tar).unbind("mousemove") 71 }); 72 73 this.getStarValue=function(){ 74 return starValue; 75 } 76 } 77 78 var starQuality = new StarComment("quality"); 79 var starService = new StarComment("service"); 80 </script> 81 </body> 82 </html>