直接看效果点这里
HTML
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 星星评分 </title> <link rel="stylesheet" href="star.css"/> </head> <body> <ul class="m-star" id="J_Star"> <li> <dl> <dt>总评：</dt> <dd><b class="num">100</b>分</dd> </dl> </li> <li> <dl> <dt>特色：</dt> <dd class="list"> <span class="item selected">☆</span> <span class="item selected">☆</span> <span class="item selected">☆</span> <span class="item selected">☆</span> <span class="item selected">☆</span> </dd> </dl> </li> <li> <dl> <dt>画面：</dt> <dd class="list"> <span class="item selected">☆</span> <span class="item selected">☆</span> <span class="item selected">☆</span> <span class="item selected">☆</span> <span class="item selected">☆</span> </dd> </dl> </li> <li> <dl> <dt>战斗：</dt> <dd class="list"> <span class="item selected">☆</span> <span class="item selected">☆</span> <span class="item selected">☆</span> <span class="item selected">☆</span> <span class="item selected">☆</span> </dd> </dl> </li> <li> <dl> <dt>操作：</dt> <dd class="list"> <span class="item selected">☆</span> <span class="item selected">☆</span> <span class="item selected">☆</span> <span class="item selected">☆</span> <span class="item selected">☆</span> </dd> </dl> </li> <li> <dl> <dt>玩法：</dt> <dd class="list"> <span class="item selected">☆</span> <span class="item selected">☆</span> <span class="item selected">☆</span> <span class="item selected">☆</span> <span class="item selected">☆</span> </dd> </dl> </li> </ul> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script src="star.js"></script> </body> </html>
CSS
/* m-star */ html, body, ul, dl, dt, dd { margin: 0; padding: 0; } li { list-style: none; } .m-star { width: 160px; padding: 10px; margin: 10px auto; background-color: #04327f; color: #e5cd9a; font-size: 12px; } .m-star .num { color: #ff0000; font-size: 18px; padding-right: 3px; } .m-star dl { overflow: hidden; line-height: 24px; } .m-star dt,.m-star dd { float: left; } .m-star dd .item { float: left; font-size: 16px; padding-right: 5px; color: #999; cursor: pointer; } .m-star dd .selected { color: #ebcd18; }
JS
// 分数计算 function calcScores(){ var num = 100, oStar = $('#J_Star'), iItemLen = oStar.find('.item').length, iSelectedLen = oStar.find('.selected').length; num = parseInt(num * (iSelectedLen / iItemLen), 10); return num; } // 星星选择 $('#J_Star .list .item').bind('click, mouseover', function(){ $(this).addClass('selected') .siblings('.item').removeClass('selected') .slice(0, $(this).index()).addClass('selected'); $('#J_Star .num').text(calcScores()); });