参考 http://www.helloweba.com/view-blog-70.html
Demo在这里 http://www.helloweba.com/demo/rate/
原文已经写的很好啦
我这里就是改成了满分5分得形式 而且更简洁易懂一点 呵呵呵
实际上星星就是在原有的div上再铺一个带有颜色div(看起来星星亮了)
(通过position absolute将两个div叠在一起 当鼠标滑动时 更改带有颜色div的长度 就是更改点亮的星星个数 )
<!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(http://www.helloweba.com/demo/rate/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"> var s=37; var g; $(function(){ //传入的分数是37 //打分的时候只有整数值 但是后来传来的值可能是小数呢！ get_rate(s); set_rate2(); }); /*参数rate的值是半百分比形式 传入44表示打分是4.4*/ function get_rate(rate){ /*从数据库中取出值并显示*/ rate=rate.toString(); $("#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({(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('.0'); $('.big_rate_up').width(parseInt($(this).attr('rate'))*28); }); //点击过星星就记录下这个人打的分数值 保存在s中 $(this).click(function(event) { s=$(this).attr('rate'); //打分时只有12345整数值可以选 g=0; }); }); //当离开星星区域就显示分数 $('.big_rate').mouseleave(function(event) { if(parseInt(s)==0){ $('#s').text(''); }else{ $('#s').text(s); } $('#g').text('.'+parseInt(g)); //当鼠标离开 显示分数 （如果没有打分 显示原有的分数） $('.big_rate_up').width((parseInt(s)+parseInt(g)/10)*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="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>