javascript淘宝评星简版

 

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

 

【实例演示】

 

你对我人品的评价:

• 20
• 40
• 60
• 80
• 100

100分 - 人品极好啊

<script></script>

 

【程序源码】

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

CSS代码

<!--<br/ /> <br/ /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ /> http://www.CodeHighlighter.com/<br/ /> <br/ /> --> 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结构

<!--<br/ /> <br/ /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ /> http://www.CodeHighlighter.com/<br/ /> <br/ /> --> <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代码

<!--<br/ /> <br/ /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ /> http://www.CodeHighlighter.com/<br/ /> <br/ /> --> 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