　javascript淘宝评星简版 -优快云博客

本文介绍了一个用于网站的人品评分插件实现方案，通过CSS和JavaScript结合的方式实现了动态的评分效果。用户可以点击不同的评分等级来评价他人的人品，并即时显示评价结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【网上购物论坛】-IT泡吧![http://www.itpob.cn/] http://www.itpob.cn　

【实例演示】

你对我人品的评价:

100分 - 人品极好啊

【程序源码】

这个效果主要体现在CSS和javascript的配合上

CSS代码

ul, li {margin: 0; padding: 0; border: 0;}
.shop-rating {
    height : 25px;
    overflow : hidden;
    zoom : 1;
    padding : 2px 0;
    position : relative;
    z-index : 999;
    font :12px Arial;
    color :#000;
    line-height : 1.2em
}

.shop-rating span {
    height : 23px;
    display : block;
    line-height : 23px;
    float : left;
}

.shop-rating span.title {
    width : 125px;
    text-align : right;
    margin-right : 5px;
}

.shop-rating ul {
    float : left;
}

.shop-rating .result {
    margin-left : 20px;
    padding-top : 2px;
}

.shop-rating .result span {
    color : #ff6d02;
}

.rating-level,
.rating-level a {
     background : url(http://images.cnblogs.com/cnblogs_com/bluedream2009/201609/o_star.png) no-repeat scroll 1000px 1000px;
}

.rating-level {
    background-position : 0px 0px;
    width : 120px;
    height : 23px;
    position : relative;
    z-index : 1000;
}

.shop-rating .result em {
    color : #f60;
    font-family : arial;
    font-weight : bold;
}

.rating-level li {
    display : inline;
}

.rating-level a {
    line-height : 23px;
    height : 23px;
    position : absolute;
    top : 0px;
    left : 0px;
    text-indent : -999em;
    *zoom : 1;
    outline : none;
}

.rating-level a.one-star {
    width : 20%;
    z-index : 6;
}

.rating-level a.two-stars {
    width : 40%;
    z-index : 5;
}

.rating-level a.three-stars {
    width : 60%;
    z-index : 4;
}

.rating-level a.four-stars {
    width : 80%;
    z-index : 3;
}

.rating-level a.five-stars {
    width : 100%;
    z-index : 2;
}

.rating-level .current-rating, .rating-level a:hover {background-position:0 -28px}
.rating-level a.one-star:hover,.rating-level a.two-stars:hover,.rating-level a.one-star.current-rating,.rating-level a.two-stars.current-rating {background-position:0 -116px;}
.rating-level .three-stars .current-rating,.rating-level .four-stars .current-rating,.rating-level .five-stars .current-rating {background-position:0 -28px;}

HTML结构

<div class="shop-rating">
     <span class="title">你对我人品的评价:</span>
     <ul class="rating-level" id="stars2">
         <li><a href="javascript:void(0);" class="one-star" star:value="20">20</a></li>
         <li><a href="javascript:void(0);" class="two-stars" star:value="40">40</a></li>
         <li><a href="javascript:void(0);" class="three-stars" star:value="60">60</a></li>
         <li><a href="javascript:void(0);" class="four-stars" star:value="80">80</a></li>
         <li><a href="javascript:void(0);" class="five-stars" star:value="100">100</a></li>
     </ul>
     <span id="stars2-tips" class="result"></span>
     <input type="hidden" id="stars2-input" name="b" value="" size="2" />
</div>

Javascript代码

var TB = function () {
    var T$ = function(id) { return document.getElementById(id) }
    var T$$ = function(r, t) { return (r || document).getElementsByTagName(t) }
    var Stars = function (cid, rid, hid, config) {
            var lis = T$$(T$(cid), 'li' ), curA;
            for (var i = 0, len = lis.length; i < len; i++ ) {
                lis[i]._val = i;
                lis[i].onclick = function () {
                    T$(rid).innerHTML = '<em>' + (T$(hid).value = T$$(this, 'a')[0].getAttribute('star:value')) + '分</em> - ' + config.info[this ._val];
                    curA = T$$(T$(cid), 'a')[T$(hid).value / config.step - 1 ];
                };
                lis[i].onmouseout = function () {
                    curA && (curA.className += config.curcss);
                }
                lis[i].onmouseover = function () {
                    curA && (curA.className = curA.className.replace(config.curcss, '' ));
                }
            }
    };
    return {Stars: Stars}
}().Stars('stars2', 'stars2-tips', 'stars2-input' , {
            'info' : ['人品极差', '人品不咋地', '人品一般吧', '人品不错', '人品极好啊' ],
            'curcss': ' current-rating' ,
            'step': 20
        });

【源码下载】

【网上购物论坛】-IT泡吧![http://www.itpob.cn/] http://www.itpob.cn　

http://www.cnblogs.com/bluedream2009/archive/2010/07/06/1772467.html