Google Reader

仿淘宝星级评分效果

by

at 2010-07-06 15:58:28

original http://www.javaeye.com/topic/706703

最近一个小项目需要一个星级评分的效果，想去淘宝偷一个，但是还得加载YUI很不爽，还是自己动手写一个吧～


HTML:

<!--
    # 星级评分
    # star:value = 分数
-->
<div class="shop-rating">
    <span class="title">物流公司的服务：</span>
    <ul class="rating-level" id="stars2">
        <li><a class="one-star" star:value="20" href="#">20</a></li>
        <li><a class="two-stars" star:value="40" href="#">40</a></li>
        <li><a class="three-stars" star:value="60" href="#">60</a></li>
        <li><a class="four-stars" star:value="80" href="#">80</a></li>
        <li><a class="five-stars" star:value="100" href="#">100</a></li>
    </ul>
    <span class="result" id="stars2-tips"></span>
    <input type="hidden" id="stars2-input" name="b" value="" size="2" />
</div>
<!-- END 星级评分 -->

CSS:

/ 星级评分 /
.shop-rating {height: 25px;overflow: hidden;zoom: 1;padding: 2px 0px;position: relative;z-index: 999;}
.shop-rating span {height: 23px;display: block;line-height: 23px;float: left;padding-top:2px;}
.shop-rating span.title {width: 125px;text-align: right;margin-right: 5px;}
.shop-rating ul {float: left;margin:0;padding:0}
.shop-rating .result {margin-left: 20px;padding-top: 2px;}
.shop-rating .result span {color: #ff6d02;}
.shop-rating .result em {color: #f60;font-family: arial;font-weight: bold;}
.shop-rating .result strong {color: #666666;font-weight: normal;}
.rating-level,.rating-level a {background: url(http://a.tbcdn.cn/app/rc/img/star_v2.png) no-repeat scroll 1000px 1000px;}
.rating-level {background-position: 0px 0px; width: 120px;height: 23px;position: relative;z-index: 1000;}
.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;}

结构和样式是偷淘宝的！！


JS：

var Class = {
    create: function() {
        return function() { this.initialize.apply(this, arguments); }
    }
}
var Extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
}
function stopDefault( e ) {
     if ( e && e.preventDefault ){
        e.preventDefault();
    }else{
        window.event.returnValue = false;
    }
    return false;
}
/**
 * 星星打分组件
 *
 * @author  Yunsd
 * @date        2010-7-5
 /
var Stars = Class.create();
Stars.prototype = {
    initialize: function(star,options) {
        this.SetOptions(options); //默认属性
        var flag = 999; //定义全局指针
        var isIE = (document.all) ? true : false; //IE?
        var starlist = document.getElementById(star).getElementsByTagName('a'); //星星列表
        var input = document.getElementById(this.options.Input) || document.getElementById(star+"-input"); // 输出结果
        var tips = document.getElementById(this.options.Tips) || document.getElementById(star+"-tips"); // 打印提示
        var nowClass = " " + this.options.nowClass; // 定义选中星星样式名
        var tipsTxt = this.options.tipsTxt; // 定义提示文案
        var len = starlist.length; //星星数量


    for(i=0;i<len;i++){ // 绑定事件 点击 鼠标滑过
        starlist[i].value = i;
        starlist[i].onclick = function(e){
            stopDefault(e);
            this.className = this.className + nowClass;
            flag = this.value;
            input.value = this.getAttribute("star:value");
            tips.innerHTML = tipsTxt[this.value]
        }
        starlist[i].onmouseover = function(){
            if (flag< 999){
                var reg = RegExp(nowClass,"g");
                starlist[flag].className = starlist[flag].className.replace(reg,"")
            }
        }
        starlist[i].onmouseout = function(){
            if (flag< 999){
                starlist[flag].className = starlist[flag].className + nowClass;
            }
        }
    };
    if (isIE){ //FIX IE下样式错误
        var li = document.getElementById(star).getElementsByTagName('li');
        for (var i = 0, len = li.length; i < len; i++) {
            var c = li[i];
            if (c) {
                c.className = c.getElementsByTagName('a')[0].className;
            }
        }
    }
},
//设置默认属性
SetOptions: function(options) {
    this.options = {//默认值
        Input:          "",//设置触保存分数的INPUT
        Tips:           "",//设置提示文案容器
        nowClass:   "current-rating",//选中的样式名
        tipsTxt:        ["1分-严重不合格","2分-不合格","3分-合格","4分-优秀","5分-完美"]//提示文案
    };
    Extend(this.options, options || {});
}


}

基本上注释里已经写的很清楚了！我没什么可说的了！欢迎大家继续改进！！
演示请看附件！

本文附件下载:

  <li><a href="http://dl.javaeye.com/topics/download/3d03b6a8-42d6-3052-8412-89588838ed2b">Satrs.rar</a> (2.5 KB)</li>

      <br><br>
      作者: <a href="http://yunsudong.javaeye.com">yunsudong</a> 
      <br>
      声明: 本文系JavaEye网站发布的原创文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！
      <br><br>
      <span style="color:red">
        <a href="http://www.javaeye.com/topic/706703" style="color:red">已有 <strong>0</strong> 人发表回复，猛击-&gt;&gt;<strong>这里</strong>&lt;&lt;-参与讨论</a>
      </span>
      <br><br><br>

JavaEye推荐

• 北京：手机之家网站诚聘PHP程序员
• 上海：高薪诚聘Python开发人员