参考 http://www.helloweba.com/view-blog-70.html
Demo在这里 http://www.helloweba.com/demo/rate/
原文已经写的很好啦
我这里就是改成了满分5分得形式 而且更简洁易懂一点 呵呵呵
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .rate { width:600px; margin:100px auto; color:#51555c; font-size:14px; position:relative; padding:10px 0; } .rate p { margin:0; padding:0; display:inline; height:40px; overflow:hidden; position:absolute; top:0; left:100px; margin-left:140px; } .rate p span.s { font-size:36px; line-height:36px; float:left; font-weight:bold; color:#DD5400; } .rate p span.g { font-size:22px; display:block; float:left; color:#DD5400; } .big_rate { width:140px; height:28px; text-align:left; position:absolute; top:3px; left:85px; display:inline-block; background:url(http://www.helloweba.com/demo/rate/star.gif) left bottom repeat-x; } .big_rate span { display:inline-block; width:24px; height:28px; position:relative; z-index:1000; cursor:pointer; overflow:hidden; } .big_rate_up { width:140px; height:28px; position:absolute; top:0; left:0; background:url(star.gif) left top; } #my_rate { position:absolute; margin-top:40px; margin-left:100px } #my_rate span { color:#dd5400; font-weight:bold } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ get_rate(37); set_rate2(); }); /*参数rate的值是半百分比形式 传入44表示打分是4.4*/ function get_rate(rate){ /*从数据库中取出值并显示*/ rate=rate.toString(); var s; var g; $("#g").show(); if (rate.length>=3){ s=10; g=0; $("#g").hide(); }else if(rate=="0"){ s=0; g=0; }else{ s=rate.substr(0,1); g=rate.substr(1,1); } $("#s").text(s); $("#g").text("."+ g); $(".big_rate_up").animate({width:(parseInt(s)+parseInt(g)/10) * 28,height:26},1000); } function set_rate2(){ $(‘.big_rate span‘).each(function() { $(this).mouseover(function(event) { $(‘#s‘).text($(this).attr(‘rate‘)); $(‘#g‘).text(‘‘); s=$(this).attr(‘rate‘); $(‘.big_rate_up‘).width(parseInt(s)*28); }); $(this).click(function(event) { s=$(this).attr(‘rate‘); }); }); $(‘.big_rate‘).mouseout(function(event) { $(‘#s‘).text(s); $(‘#g‘).text(‘‘); $(‘.big_rate_up‘).width(parseInt(s)*28); }); } </script> </head> <body> <div id="main"> <div class="rate"> <div class="big_rate"> <span rate="1"> </span> <span rate="2"> </span> <span rate="3"> </span> <span rate="4"> </span> <span rate="5"> </span> <div style="width:0px;" class="big_rate_up"></div> </div> <p> <span id="s" class="s"></span> <span id="g" class="g"></span> </p> <div id="my_rate"></div> </div> </div> </body> </html>