星级评论jq

html结构

<div class="list_item">
    <span>商品包装满意度：</span>
    <b class="stars1"></b>
</div>
<div class="list_item">
    <span>发货速度满意度：</span>
    <b class="stars2"></b>
</div>
<div class="list_item">
    <span>快递速度满意度：</span>
    <b class="stars3"></b>
</div>

js调用

    var stars1=new Stars($(‘.stars1‘));
    var stars2=new Stars($(‘.stars2‘));
    var stars3=new Stars($(‘.stars3‘));

    stars1.createS();
    stars2.createS();
    stars3.createS();

js详细

// 星级评论
function Stars(ele){
    this.element=ele;
    this.temp=ele.css(‘background-position‘);
}
Stars.prototype={
    createS:function(){
        var _this=this;
        $(_this.element).mousemove(function(event) {
            _this.fnMove();
        }).click(function(event) {
            _this.fnDown();
        }).mouseleave(function(event) {
            _this.fnLeave();
        });
    },
    fnMove:function(e){
        var e=e || window.event;
        var disX=e.pageX-$(this.element).offset().left;
        if (disX<18){
            $(this.element).css(‘background-position‘, ‘-199px -390px‘);
        }else if(disX<36){
            $(this.element).css(‘background-position‘, ‘-182px -390px‘);
        }else if(disX<54){
            $(this.element).css(‘background-position‘, ‘-165px -390px‘);
        }else if(disX<62){
            $(this.element).css(‘background-position‘, ‘-148px -390px‘);
        }else if(disX<84){
            $(this.element).css(‘background-position‘, ‘-131px -390px‘);
        }
    },
    fnDown:function(e){
        var e=e || window.event;
        var disX=e.pageX-$(this.element).offset().left;
        if (disX<18){
            $(this.element).css(‘background-position‘, ‘-199px -390px‘);
        }else if(disX<36){
            $(this.element).css(‘background-position‘, ‘-182px -390px‘);
        }else if(disX<54){
            $(this.element).css(‘background-position‘, ‘-165px -390px‘);
        }else if(disX<62){
            $(this.element).css(‘background-position‘, ‘-148px -390px‘);
        }else if(disX<84){
            $(this.element).css(‘background-position‘, ‘-131px -390px‘);
        }
        this.temp=$(this.element).css(‘background-position‘);
    },
    fnLeave:function(){
        $(this.element).css(‘background-position‘, this.temp);
    }
}

只是一个简单的星级评论效果