最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery淘宝订单星级评分

来源:http://www.erdangjiade.com/ 沐浴春风 2015-06-05 06:38浏览(1621)

最近一个小项目需要一个星级评分的效果,所以去淘宝偷了一个订单评论里的星级评分,自己原创,不是仿的哦,代码不是很复杂。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery淘宝订单星级评分
分类:其它特效 > 星星打分 难易:初级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

HTML

首先我们在页面加上速度评价、服务评价、满意度的星星代码:

<div class="stars">
    <label>速度评价:</label>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
</div>
<div class="stars">
    <label>服务评价:</label>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
</div>
<div class="stars">
    <label>满意度:</label>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
</div>

jQuery

接着我们定义评论的三维数组:

var data = [
        [
            ['很差', '我觉得永远都收不到了'],
            ['一般', '速度太慢,三五个月吧'],
            ['好', '速度还行,正常范围'],
            ['很好', '速度不错,三四周就到手了'],
            ['非常好', '这次是真快!非常满意']
        ],
        [
            ['很差', '这家有服务吗!?'],
            ['一般', '态度较差,不能解决问题'],
            ['好', '客服反应慢,附加服务较少'],
            ['很好', '不错,附加服务多多,客服热情'],
            ['非常好', '附加服务全面,需要的都有']
        ],
        [
            ['很差', '以后不会再来了,商品一般'],
            ['一般', '价格没优势,还行'],
            ['好', '特价时能看看,经常买的一家了'],
            ['很好', '相当不错,目前买同类产品最好的一家了'],
            ['非常好', '货品全,折扣大,不砍单']
        ]
];

鼠标悬浮各个图片的样式定义:

var stars = [
        ['star_hover.png', 'star_gray.png', 'star_gray.png', 'star_gray.png', 'star_gray.png'],
        ['star_hover.png', 'star_hover.png', 'star_gray.png', 'star_gray.png', 'star_gray.png'],
        ['star_gold.png', 'star_gold.png', 'star_gold.png', 'star_gray.png', 'star_gray.png'],
        ['star_gold.png', 'star_gold.png', 'star_gold.png', 'star_gold.png', 'star_gray.png'],
        ['star_gold.png', 'star_gold.png', 'star_gold.png', 'star_gold.png', 'star_gold.png'],
];

鼠标悬浮和离开星星触发的事件:

$(".stars").find("img").hover(function() { //星星悬浮触发
    var obj = $(this); //当前对象
    var star_area = obj.parent(".stars"); //当前父级.stars
    var star_area_index = star_area.index(); //当前父级.stars索引
    var index = obj.parent(".stars").find("img").index($(this)); //当前星星索引
    var left = obj.position().left;
    var top = obj.position().top + 25;
    var comment_title = data[star_area_index][index][0]; //标题
    var comment_description = data[star_area_index][index][1]; //描述
    $("#tip").css({
        "left": left,
        "top": top
    }).show().html(comment_title); //显示定位提示信息
    for (var i = 0; i < 5; i++) {
        star_area.find("img").eq(i).attr("src", "images/" + stars[index][i]); //切换每个星星
    }
    star_area.find(".comment_description").remove(); //星星右侧切换描述
    star_area.append("<span class='comment_description'>" + comment_title + "<span class='intro'>" + comment_description + "</span></span>");

},
function() { //鼠标离开星星
    $("#tip").hide(); //隐藏提示
    var obj = $(this); //当前对象
    var star_area = obj.parent(".stars"); //当前父级.stars
    var star_area_index = star_area.index(); //当前父级.stars索引
    var index = star_area.attr("data-default-index"); //点击后的索引
    if (index >= 0) { //若该行点击后的索引大于等于0,说明该行星星已被点击
        var comment_title = data[star_area_index][index][0]; //标题
        var comment_description = data[star_area_index][index][1]; //描述
        star_area.find(".comment_description").remove(); //显示切换描述
        star_area.append("<span class='comment_description'>" + comment_title + "<span class='intro'>" + comment_description + "</span></span>");
        for (var i = 0; i < 5; i++) {
            star_area.find("img").eq(i).attr("src", "images/" + stars[index][i]); //更新该行星星
        }
    } else {
        var obj = $(this);
        var star_area = obj.parent(".stars");
        star_area.find(".comment_description").remove();
        for (var i = 0; i < 5; i++) {
            star_area.find("img").eq(i).attr("src", "images/star_gray.png"); //更新该行星星都变初始状态
        }
    }
})

鼠标点击每颗星星触发的click事件:

$(".stars").find("img").click(function() { //当点击每颗星星
    var obj = $(this); //当前对象
    var star_area = obj.parent(".stars"); //当前父级.stars
    var star_area_index = star_area.index(); //当前父级.stars索引
    var index = obj.parent(".stars").find("img").index($(this)); //当前星星索引
    var comment_title = data[star_area_index][index][0]; //标题
    var comment_description = data[star_area_index][index][1]; //描述
    star_area.attr("data-default-index", index); //记录点击后的索引,用来鼠标移出星星后,获取之前点击后的星星索引
    star_area.find(".comment_description").remove(); //显示切换描述
    star_area.append("<span class='comment_description'>" + comment_title + "<span class='intro'>" + comment_description + "</span></span>");
})
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/144.html
评论2
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 椅子
    05-20 22:21
    cchong
    不錯還行
  • 头像 沙发
    10-19 16:29
    qq562140910
    积分积分积分积分积分
1 2