Juuery实现评分效果

悬赏园豆：40 [已解决问题] 解决于 2012-04-05 10:43

<p >
<label>Commodity Quality</label>
<label>Shipping Speed</label>
<label>Service satisfaction</label>
</p>
<p >
<label >
    <img src="/Styles/images/Comet_s1.jpg" alt=""/> <img src="/Styles/images/Comet_s1.jpg" alt=""/> <img src="/Styles/images/Comet_s1.jpg" alt=""/> <img src="/Styles/images/Comet_s1.jpg" alt=""/> <img src="/Styles/images/Comet_s1.jpg" alt=""/></label>  
    <label >Very Unsatisfied</label>
    <label >
    <img src="/Styles/images/Comet_s1.jpg" alt=""/> <img src="/Styles/images/Comet_s1.jpg" alt=""/> <img src="/Styles/images/Comet_s1.jpg" alt=""/> <img src="/Styles/images/Comet_s1.jpg" alt=""/> <img src="/Styles/images/Comet_s1.jpg" alt=""/></label>  
    <label >Unsatisfied</label>
    <label >
    <img src="/Styles/images/Comet_s1.jpg" alt=""/> <img src="/Styles/images/Comet_s1.jpg" alt=""/> <img src="/Styles/images/Comet_s1.jpg" alt=""/> <img src="/Styles/images/Comet_s1.jpg" alt=""/> <img src="/Styles/images/Comet_s1.jpg" alt=""/></label>  
    <label >Neutral</label>

</p>

这是我的html代码求实现功能我就两张图片一张是一个灰色的星，一张是个一黄色的小星 Comet_s1.jpg这是灰色的星星两张图片都是12*12的

Javascript

问题补充：

实现鼠标以上去灰色星星变成黄色点击就算评分取值就可以 Juqery实现求具体代码带上CSS

miloss | 菜鸟二级 | 园豆：254
提问于：2012-03-30 14:08

< >

最佳答案

Demo:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Jquery星级评分插件</title>
    <style type="text/css">
        .star-rating,
        .star-rating a:hover,
        .star-rating a:active,
        .star-rating a:focus,
        .star-rating .current-rating{
            background: url(http://i.6.cn/cvbnm/ed/bc/2b/8133f85857fcd21ee94e1c6568b6aa58.gif) left -1000px repeat-x;
        }
        .star-rating{
            position:relative;
            width:125px;
            height:25px;
            overflow:hidden;
            list-style:none;
            margin:0;
            padding:0;
            background-position: left top;
        }
        .star-rating li{
            display: inline;
        }
        .star-rating a,
        .star-rating .current-rating{
            position:absolute;
            top:0;
            left:0;
            text-indent:-1000em;
            height:25px;
            line-height:25px;
            outline:none;
            overflow:hidden;
            border: none;
        }
        .star-rating a:hover,
        .star-rating a:active,
        .star-rating a:focus{
            background-position: left bottom;
        }
        .star-rating .current-rating{
            z-index:1;
            background-position: left center;
        }
        
        .inline-rating{
            display:-moz-inline-block;
            display:-moz-inline-box;
            display: inline-block;
            vertical-align: middle;
        }
        
        .small-star{
            width:50px;
            height:10px;
        }
        .small-star,
        .small-star a:hover,
        .small-star a:active,
        .small-star a:focus,
        .small-star .current-rating{
            background-image: url(http://i.6.cn/cvbnm/cd/8e/1f/fff1ceb0395574a6372864cc8ac38394.gif);
            line-height: 10px;
            height: 10px;
        }
        
        /*以下为本页面样式*/
        @charset "utf-8";
        /* CSS Document */
        body{width:auto; margin:0px; font-size:84%; background:#eee; color:#333; font-family:Verdana, Geneva, sans-serif;}
        ul,ol,form,h1,h2,h3,h4,h5,h6,p{padding:0; margin:0; list-style-type:none;}
        .out_box{
            width:70%;
            min-width:700px;
            border-left:1px solid white;
            border-right:1px solid white;
            margin:0px auto;
        }
        .mb10{margin-bottom:10px;}
        .f9{font-size:0.9em;}
        .f14{font-size:14px;}
        .in_box{min-height:550px; _height:550px; border-left:1px solid #ccc; border-right:1px solid #ccc; background:white; padding:1em 2.5em 0;}
        .header{padding:10px 20px 5px; border-bottom:1px solid #ccc; overflow:hidden; zoom:1;}
        .title{font-size:1.6em; text-align:center; margin:20px 0;}
        .main_con{padding:0 20px 20px;}
        .footer{padding-bottom:25px; text-align:center;}
        .test_list{padding:1em; font-size:1.1em; border-bottom:1px dashed #ccc; line-height:1.3; overflow:hidden; zoom:1;}
        .code{display:block; padding:10px; margin:5px 0; background:#eee; border:1px dashed #ccc; clear:both; zoom:1;}
        .code xmp,.code pre{margin:0; color:#00F; font-size:12px; white-space:pre-wrap; word-wrap:break-word;}
        .author_time{float:right; margin-top:34px; color:#787878; font-family:"Courier New", Courier, monospace;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        jQuery.fn.rater =function(url, options)
        {
            if(url ==null) return;
            var settings = {
                url       : url, // ajax提交的地址，注意是用post方法提交的哦
                maxvalue  : 5,   // 星星的最大数量
                curvalue  : 0// 默认选中第几个星星
            };
        
            if(options) { jQuery.extend(settings, options); };
            jQuery.extend(settings, {cancel: (settings.maxvalue >1) ?true : false});
        
            var container = jQuery(this);
            jQuery.extend(container, { averageRating: settings.curvalue, url: settings.url });
        
            if(!settings.style || settings.style ==null|| settings.style =='basic') {
                var raterwidth = settings.maxvalue *25;
                var ratingparent ='<ul class="star-rating" style="width:'+raterwidth+'px">';
            }
            if(settings.style =='small') {
                var raterwidth = settings.maxvalue *10;
                var ratingparent ='<ul class="star-rating small-star" style="width:'+raterwidth+'px">';
            }
            if(settings.style =='inline') {
                var raterwidth = settings.maxvalue *10;
                var ratingparent ='<span class="inline-rating"><ul class="star-rating small-star" style="width:'+raterwidth+'px">';
            }
            container.append(ratingparent);
        
            // 初始化星星
var starWidth, starIndex, listitems ='';
            var curvalueWidth = Math.floor(100/ settings.maxvalue * settings.curvalue);
            for(var i =0; i <= settings.maxvalue ; i++) {
                if (i ==0) {
                    listitems+='<li class="current-rating" style="width:'+curvalueWidth+'%;">'+settings.curvalue+'/'+settings.maxvalue+'</li>';
                } else {
                    starWidth = Math.floor(100/ settings.maxvalue * i);
                    starIndex = (settings.maxvalue - i) +2;
                    listitems+='<li class="star"><a href="#'+i+'" title="'+i+'/'+settings.maxvalue +'" style="width:'+starWidth+'%;z-index:'+starIndex+'">'+i+'</a></li>';
                }
            }
            container.find('.star-rating').append(listitems);
        
            if(settings.maxvalue >1) // 添加一个容器来接受ajax返回的信息
            {
                container.append('<span class="star-rating-result"></span>');
            }
            var stars = jQuery(container).find('.star-rating').children('.star');
            stars.click(function()
            {
                if(settings.maxvalue ==1) // 如果maxvalue是1的话，那就没有ajax返回
                {
                    settings.curvalue = (settings.curvalue ==0) ?1 : 0;
                    jQuery(container).find('.star-rating').children('.current-rating').css({width:(settings.curvalue*100)+'%'});
                    jQuery.post(container.url, { "rating": settings.curvalue });
                    returnfalse;
                }
                else
                {
                    settings.curvalue = stars.index(this) +1;
                    raterValue = jQuery(this).children('a')[0].href.split('#')[1];
                    jQuery.post(container.url, { "rating": raterValue }, function(response){
                        container.children('.star-rating-result').html(response)
                    });
                    returnfalse;
                }
                returntrue;
            });
        
            returnthis; // 严厉警告：匿名函数不总是返回一个值。
        }
    </script>
</head>
<body>
    <h1 class="title">Jquery星级评分插件</h1>
        <div class="in_box">
            <div class="main_con">
                <div class="test_list">
                    <h3 class="mb10_f14">先上效果</h3>
                    <div id="demo1"></div>
                    <code class="source">
                        js代码：$('#demo1').rater('http://www.chinacxy.com');
                    </code>
                    <script type="text/javascript">
                        $('#demo1').rater('http://www.chinacxy.com');
                    </script>
                </div>
                <div class="test_list">
                    <h3 class="mb10_f14">插件用法:</h3>
                    <div class="code">
                        参数一为Ajax反馈地址<br>
                        参数二为Object（对象），可选：其中的参数有：<br>
                        <table width="100%" cellpadding="5" bgcolor="#ffffff">
                            <tr>
                                <td width="150">style</td><td>显示星星的方式，有三种选择 basic，small，inline</td>
                            </tr>
                            <tr>
                                <td>maxvalue</td><td>星星的最大数量</td>
                            </tr>
                            <tr>
                                <td>curvalue</td><td>默认选中第几个星星</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="test_list">
                    <div id="demo5"><strong>星星数大于5个</strong><br /></div>
                    <code class="source">
                        JS代码：$('#demo5').rater('http://www.chinacxy.com', {style: 'basic',maxvalue:10,curvalue:3});
                    </code>
                    <script type="text/javascript">
                        $('#demo5').rater('http://www.chinacxy.com', {style: 'basic',maxvalue:10,curvalue:3});
                    </script>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

在线演示：http://jscode.chinacxy.com/code/eb71ac13b72df6ba79c24f3aa020f815.aspx

收获园豆：20

artwl | 专家六级 |园豆：16736 | 2012-03-30 20:02

其他回答(2)

两个层一个外层一个内层，外层的背景是灰色的，宽度固定，内层的背景是黄色的，宽度根据用户鼠标的位置来定。

自己想原理，自己写吧

收获园豆：10

玉开 | 园豆：8822 (大侠五级) | 2012-03-30 15:32

新手啊求代码

支持(0) 反对(0) miloss | 园豆：254 (菜鸟二级) | 2012-03-30 16:04

关注学习。。。

收获园豆：10

KivenRo | 园豆：1734 (小虾三级) | 2012-03-31 09:07

这有一个很好的例子，你可以参考一下：

http://fgm.cc/learn/lesson4/09.html

效果图：

支持(0) 反对(0) KivenRo | 园豆：1734 (小虾三级) | 2012-03-31 09:10

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

Juuery实现评分效果

欢迎，请先登录或者注册。