星级评分系统

star

 {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style-type: none;
        }
        .container {
            width: 400px;
            margin: 10px auto;
        }
        #star ul, #star span {
            float: left;
            display: inline;
            height: 19px;
            line-height: 19px;
        }
        #star ul {
            margin: 0 10px;
        }
        #star li {
            float: left;
            cursor: pointer;
            background: url("images/star-img.png") no-repeat;
            width: 18px;
            text-indent: -9999px;
            background-position: -28px -2px;
            height: 18px;
            padding-right: 5px;
        }
        #star li.on {
            background-position: -2px -2px;
        }
        p {
            display: none;
            position: absolute;
            top: 30px;
            width: 159px;
            padding: 0 10px;
            font-style: normal;
            background-color: #eee;
            border: 1px solid #ddd;
        }
        em {
            display: block;
            color: orangered;
        }
        strong {
            margin-left: 10px;
            color: orangered;
        }

<body>
    <div id="star" class="container">
        <span style="font-size: 18px">点击星星就能打分</span>
        <ul id="box" class="stars">
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
            <li><a href="javascript:;"></a></li>
        </ul>
        <span></span>
        <p></p>
    </div>

<script>
    var star = document.getElementById('star'),
        imgs = star.getElementsByTagName('li'),
        op = document.getElementsByTagName('p')[0],
        box = document.getElementById('box'),
        oSpan = document.getElementsByTagName('span')[1],
        count = 0;
    var aMsg = [
        '很不满意|差的太离谱',
        '不满意|部分有破损',
        '一般|质量一般',
        '满意|质量不错',
        '非常满意|质量非常好'
    ];

    for (var i=1; i<=imgs.length; i++) {
        imgs[i-1].index = i;
        imgs[i-1].onmouseover = function () {
            imgSrc(this.index);
            op.style.display = 'block';
            op.style.left = box.offsetLeft + this.index * this.offsetWidth - 80 + 'px';
            op.innerHTML = '<em><b>' + this.index + '</b> 分 ' + aMsg[this.index-1].match(/(.+)\|/)[1] + '</em>' +
                    aMsg[this.index-1].match(/\|(.+)/)[1]
        };
        imgs[i-1].onmouseout = function () {
            imgSrc();
            op.style.display = 'none';
            console.log(1);
        };
        imgs[i-1].onclick = function () {
            count = this.index;
            op.style.display = 'none';
            oSpan.innerHTML = '<strong>' + this.index + '分</strong> (' + aMsg[this.index-1].match(/\|(.+)/)[1] + ')';
        };
        function imgSrc(a) {
            score = a || count;
            for (var i=0; i<imgs.length; i++) {
                imgs[i].className = i < score ?'on' : '';
            }
        }
    }

代码在网上搜的,其实一开始自己写的星星图片是用<img>的src引进的, 但是在鼠标移动到不同的星星时, 总是闪一下, 就把星星图设为背景图了,但还是闪, 其实把星星之间用padding隔开就好了, 用margin的话每次离开一颗星星都要先把所有星星变为灰色, 就会闪一下

正则就是分别选择|前或|后的文本
浮动层左边的位置就是星星左边界再向左80px

background-position

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

星级评分系统

推荐阅读更多精彩内容