码迷,mamicode.com
首页 > 其他好文 > 详细

星级评论jq

时间:2015-06-24 18:31:18      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:

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);
    }
}

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

星级评论jq

标签:

原文地址:http://www.cnblogs.com/JerryWang24/p/4598054.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!