星星打分

参考 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">&nbsp;</span>
                <span rate="2">&nbsp;</span>
                <span rate="3">&nbsp;</span>
                <span rate="4">&nbsp;</span>
                <span rate="5">&nbsp;</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>