使用jQuery实现点评星星效果

1. html代码

<table class="block">
    <tr>
        <td>
            <span class="label">总体评价<em>*</em>:</span>
        </td>
        <td>
            <div class="rating-wrap">
                <ul class="rating-wrap-ul"  οnmοuseοut="onUlMouseOut()" οnmοuseοver="onUlMouseOver()">
                    <li><a class="one-star" title="很差" data-hint="很差" href="javascript:clickStar(1);" οnmοuseοver="onLiMouseOver(1)" οnmοuseοut="onLiMouseOut()"></a></li>
                    <li><a class="two-stars" title="差" data-hint="差" href="javascript:clickStar(2);" οnmοuseοver="onLiMouseOver(2)" οnmοuseοut="onLiMouseOut()"></a></li>
                    <li><a class="three-stars" title="还行" data-hint="还行" href="javascript:clickStar(3);" οnmοuseοver="onLiMouseOver(3)" οnmοuseοut="onLiMouseOut()"></a></li>
                    <li><a class="four-stars" title="好" data-hint="好" href="javascript:clickStar(4);" οnmοuseοver="onLiMouseOver(4)" οnmοuseοut="onLiMouseOut()"></a></li>
                    <li><a class="five-stars" title="很好" data-hint="很好" href="javascript:clickStar(5);" οnmοuseοver="onLiMouseOver(5)" οnmοuseοut="onLiMouseOut()"></a></li>
                </ul>
            </div>
            <span id="ratingText" class="active-hint" innerText=""></span>
        </td>
    </tr>
    <tr>
        <td>
            <span class="label">评价<em>*</em>:</span>
        </td>
        <td>
            <span class="note">(50-2000个字)</span>
            <span id="textCount" class="note" innerText=""></span>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            <textarea name="appraiseText" id="appraiseText" class="form-content-block form-textarea" rows="12"></textarea>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td align="right">
            <input type="button" value="提交" οnclick="submitAppraise()">
            <input type="button" value="关闭" οnclick=" ">
        </td>
    </tr>
</table>

2. 所需要的css

body {
    color: #333;
    font: normal normal normal 12px/1.5 Arial, 宋体, sans-serif;
}
.block{
    clear: both;
    margin-bottom:20px;
    margin-bottom: 10px;
    zoom: 1;
    padding:5px 11px;border:1px solid #F5EEE8;
    padding-top:10px;margin:0 10px 0;
    padding-bottom:20px;border-bottom:1px dashed #E4E4E4;
    margin:10px auto;padding:0;border:none;
}

.label{
    float:right;
    margin-right: 10px;
    text-align: right;
    font-weight: normal;
    font-style:normal;
    width: 94px;
}
em{
    margin-right:5px;
    color:#c00;
    font-weight:bold;
    font-style:normal;
    margin-left:2px;
}
.note {
    color: #999;
}

.form-textarea{
    float: left;
    font-family: Tahoma, Geneva, sans-serif;
    margin-right: 5px;
    width: 598px;
    zoom: 1;
    font-family: inherit;
    font-size: 100%;
    -webkit-appearance: textarea;
    -webkit-box-orient: vertical;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    background-color: white;
    border: 1px solid;
    cursor: auto;
    padding: 2px;
    resize: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}
       
.rating-wrap {
    display: inline-block;
    float: left;
    position: relative;
    top: -2px;
    width: 89px;
    height: 20px;
    margin-right: 5px;
    padding: 4px 0 0 5px;
    border: 1px solid #EFE0D7;
    background: #FFF9F1;
    z-index: 0;
}
.rating-wrap ul,.rating-wrap a:hover {
    background-image: url(../images/star_shade.png);
    background-repeat: no-repeat;
}

.rating-wrap ul {
    -webkit-padding-start: 40px;
    display: block;
    list-style-type: disc;
    margin: 1em 0px;
    border: 0px;
    margin: 0px;
    outline: 0px;
    padding: 0px;
    list-style: none;
    position: relative;
    width: 85px;
    height: 16px;
    background-position: 0 -90px;
    z-index: 10;
}

.rating-wrap li {
    display: inline;
}

.rating-wrap a {
    zoom: 1;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    height: 16px;
}

.rating-wrap .five-stars {
    width: 84px;
    z-index: 10;
    background-position: 0 0px;
}

.rating-wrap .four-stars {
    width: 68px;
    z-index: 20;
    background-position: 0 -18px;
}

.rating-wrap .three-stars {
    width: 51px;
    z-index: 30;
    background-position: 0 -36px;
}

.rating-wrap .two-stars {
    width: 34px;
    z-index: 40;
    background-position: 0 -54px;
}

.rating-wrap .one-star {
    width: 17px;
    z-index: 50;
    background-position: 0 -72px;
}

.active-hint{
    color: #C00;
    float: left;
    padding-top:2px;
    font-weight: normal;
    font-style:normal;
}

3. 所需要的javascript代码

$(document).ready(function(){
    $("#appraiseText").bind("keydown", function(){
        var count = $("#appraiseText").val().length;
        if( count <= 200 ){
            $("#textCount").html(" 还能输入<font color='green'><b>" + (200 - count) + "</b></font>个字");
        }else{
            $("#textCount").html(" 已超出<font color='red'><b>" + (count - 200) + "</b></font>个字");
        }
    });   
});

var starValue=0;
function onUlMouseOut(){
    var y = -90 + starValue * 18;
    var position = "0 " + y + "px";
    $(".rating-wrap-ul").css({
        "background-position" : position
    });
}

function onUlMouseOver(){
    $(".rating-wrap-ul").css({
        "background-position" : "0 -90px"
    });
}
function onLiMouseOver(grade){
    switch(grade){
        case 1 : document.getElementById("ratingText").innerHTML="很差";break;
        case 2 : document.getElementById("ratingText").innerHTML="差";break;
        case 3 : document.getElementById("ratingText").innerHTML="还行";break;集装箱运费
        case 4 : document.getElementById("ratingText").innerHTML="好";break;
        case 5 : document.getElementById("ratingText").innerHTML="很好";break;
        default :  document.getElementById("ratingText").innerHTML="";
    }
}
function onLiMouseOut(){
    onLiMouseOver(starValue);
}
function clickStar(grade){TP-LINK无线路由器设置密码后无法访问的分析
    starValue = grade;       
    var y = -90 + grade * 18;
    var position = "0 " + y + "px";
    $(".rating-wrap-ul").css({
        "background-position" : position
    });
}

转载于:https://www.cnblogs.com/ctou45/archive/2011/06/15/2081170.html