星星评级 星型评级 这个要怎么弄？简单的说 我是菜鸟

如题 我想要个星型评级的
代码简单一点 我怕我看不懂

解决方案 »

  1.   


    <!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>
        <title>test</title>
        <meta name="author" content="sohighthesky"/>
        <meta name="Keywords" content="星级评分效果,javascript"/>
        <style type="text/css">
        /* pre style*/
        body,th,td {font-size:12px;font-family:Verdana,Tahoma,Arial,'\5b8b\4f53','\5FAE\8F6F\96C5\9ED1',sans-serif;}
        body,th,td,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,button,textarea,p  {margin:0;padding:0;}
        li { list-style-type:none;}
        a {color:#3366CC; text-decoration:none;}
    a:hover  {color:#FF6600;text-decoration:underline;}
    /************************************************************/
    #div1{margin:20px auto;width:300px;}

    .grade_stars,.grade_stars div {background:transparent url(http://pages.anjukestatic.com/img/comm/commstar.gif) repeat-x scroll left -26px}
    .grade_stars{cursor:pointer;padding:0; position:relative; line-height:24px; width:75px;display:inline-block; }
        .grade_stars div{ background-position:left 4px; text-indent:-9999px; width:38px; }
        </style>
    </head>
    <body>
    <div id="div1">评分：
        <span class="grade_stars" id="grade_stars">
            <div>&nbsp;</div>
        </span>&nbsp;&nbsp;<span id="score">5.0分</span>
    </div></body>
    <script type="text/javascript">
    !function(){
    var g=function(id){return typeof(id)==="string"?document.getElementById(id):id};g("grade_stars").onclick=function(e){
        e=window.event || e;
        var w=e.offsetX ||e.layerX;
        this.children[0].style.width=w+"px";
        g("score").innerHTML=(w/this.offsetWidth*10).toFixed(1)+"分";
    }}();
    </script>
    </html>
      

  2.   

    jquery行不行，我用过jquery_rater 简单，而且讲的详细！！