为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Javascript:模仿淘宝信用评价

Javascript:模仿淘宝信用评价

标签：
JavaScript

老板昨天开会说:要给公司的购物平台增加信用评价功能，用户体验参考淘宝。

于是今天研究了一下，用jQuery模似一个类似的效果: 



代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>模仿淘宝的信用评价--菩提树下的杨过(yjmyzz.cnbogs.com)</title>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.js"></script>
    <script type="text/javascript">
        var rateMessage = {
            'rate-1': {
                'rate-1': '差得太离谱，与卖家描述的严重不符，非常不满',
                'rate-2': '部分有破损，与卖家描述的不符，不满意',
                'rate-3': '质量一般，没有卖家描述的那么好',
                'rate-4': '质量不错，与卖家描述的基本一致，还是挺满意的',
                'rate-5': '质量非常好，与卖家描述的完全一致，非常满意'
            },
 
            'rate-2': {
                'rate-1': '卖家态度很差，还骂人、说脏话，简直不把顾客当回事',
                'rate-2': '卖家有点不耐烦，承诺的服务也兑现不了',
                'rate-3': '卖家回复问题很慢，态度一般，谈不上沟通顺畅',
                'rate-4': '卖家服务挺好的，沟通挺顺畅的，总体满意',
                'rate-5': '卖家的服务太棒了，考虑非常周到，完全超出期望值'
            },
 
            'rate-3': {
                'rate-1': '再三提醒下，卖家才发货，耽误我的时间，包装也很马虎',
                'rate-2': '卖家发货有点慢的，催了几次终于发货了',
                'rate-3': '卖家发货速度一般，提醒后才发货的',
                'rate-4': '卖家发货挺及时的，运费收取很合理',
                'rate-5': '卖家发货速度非常快，包装非常仔细、严实'
            },
 
            'rate-4': {
                'rate-1': '物流公司态度非常差，送货慢，外包装有破损',
                'rate-2': '物流公司服务态度挺差，运送速度太慢',
                'rate-3': '物流公司服务态度一般，运送速度一般',
                'rate-4': '物流公司态度还好吧，送货速度挺快的',
                'rate-5': '物流公司服务态度很好，运送速度很快'
            }
        };
 
 
 
        $().ready(function () {
 
            var starInit = $("#starInit");
            var ulStars = $("#ulStars");
            var txtStar = $("#txtStar");
            var tip = $("#tip");
            var rate_1_result = $("#rate_1_result");
            var star_wrap = $("#star_wrap");
 
            starInit.hover(function () {
                starInit.hide();
                star_wrap.show();
            })
 
            var oLis = $("#ulStars li");
            oLis.each(function (i) {
                $(this).click(function () {
                    var iStar = parseInt($(this).attr("star"), 10);
                    txtStar.val(iStar);
                    rate_1_result.html("<span style='color:red'>" + iStar + " 分</span> - " + rateMessage["rate-1"]["rate-" + iStar]);
                }).hover(function () {
                    var iStar = parseInt($(this).attr("star"), 10);
                    for (var i = 0; i < oLis.length; i++) {
                        var _temp = oLis[i];
                        if (_temp.attributes["star"].value <= iStar) {
                            if (iStar >= 3) {
                                _temp.className = "good";
                            }
                            else {
                                _temp.className = "bad";
                            }
                        }
                        else {
                            _temp.className = "";
                        }
                    }
                }, function () {
                    if (txtStar.val() != "") {
                        var iSelectedStar = parseInt(txtStar.val(), 10);
                        for (var i = 0; i < oLis.length; i++) {
                            var _temp = oLis[i];
                            if (_temp.attributes["star"].value > iSelectedStar) {
                                _temp.className = "";
                            }
                            else {
                                var iSelfStar = parseInt(_temp.attributes["star"].value, 10);
                                if (iSelfStar >= 3) {
                                    _temp.className = "good";
                                }
                                else {
                                    if (iSelectedStar >= 3) {
                                        _temp.className = "good";
                                    }
                                    else {
                                        _temp.className = "bad";
                                    }
                                }
                            }
                        }
                    }
                }).mousemove(function (e) {
                    var intX = 0, intY = 0;
                    if (e == null) {
                        e = window.event;
                    }
                    if (e.pageX || e.pageY) {
                        intX = e.pageX; intY = e.pageY;
                    }
                    else if (e.clientX || e.clientY) {
                        if (document.documentElement.scrollTop) {
                            intX = e.clientX + document.documentElement.scrollLeft;
                            intY = e.clientY + document.documentElement.scrollTop;
                        }
                        else {
                            intX = e.clientX + document.body.scrollLeft;
                            intY = e.clientY + document.body.scrollTop;
                        }
                    }
                    var tipbar = tip.get(0);
                    tipbar.style.top = (intY + 20) + "px";
                    tipbar.style.left = (intX - 95) + "px";
                    tipbar.style.display = "";
 
                    var iStar = parseInt($(this).attr("star"), 10);
                    tip.html("<span style='color:red'>" + iStar + " 分</span> - " + rateMessage["rate-1"]["rate-" + iStar]);
 
                }).mouseout(function () {
                    tip.hide();
                })
            })
 
            star_wrap.hover(function () { }, function () {
                setTimeout(initStar, 50);
            })
 
            ulStars.hover(function () { }, function () { setTimeout(initStar, 50); });
 
            var initStar = function () {
                if (txtStar.val() == "") {
                    star_wrap.hide();
                    starInit.show();
                    for (var i = 0; i < oLis.length; i++) {
                        var _temp = oLis[i];
                        _temp.className = "";
                    }
                }
            }
        }) 
         
              
     
    </script>
    <style type="text/css">
        * { padding: 0; margin: 0; list-style: none; font-size: 12px; }
        #starBox { margin: 100px; }
        #starInit { width: 120px; height: 36px; overflow: hidden; float: left; }
        #star_wrap, #ulStars { width: 120px; height: 18px; overflow: hidden; float: left; }
        #ulStars li { width: 19px; height: 18px; background: url(bg.gif) no-repeat -278px -96px; float: left; margin-right: 5px; cursor: pointer; }
        #ulStars li.good { background: url(bg.gif) no-repeat -278px -52px; }
        #ulStars li.bad { background: url(bg.gif) no-repeat -278px -73px; }
        #tip { width: 171px; height: 67px; background: url(bg.gif) no-repeat -40px -167px; padding: 15px 3px 0 5px; line-height: 18px; }
        #txtStar { position: absolute; left: 0; top: -30px; }
        #rate_1_result { float: left; line-height: 25px; text-indent: 15px; color: Red; }
    </style>
</head>
<body>
    <div id="starBox">
        <div id="starInit">
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="star_init.gif" alt="点击星星即可评分" />
        </div>
        <div id="star_wrap" style="display: none">
            <ul id="ulStars">
                <li star="1"></li>
                <li star="2"></li>
                <li star="3"></li>
                <li star="4"></li>
                <li star="5"></li>
            </ul>
        </div>
        <div id="rate_1_result">←点击星星就能评价了</div>
        <input type="text" id="txtStar" style="width: 30px" value="" />
        <div id="tip" style="position: absolute; display: none"></div>
    </div>
</body>
</html>
点击查看更多内容
发表于 2018.04.12 16:44， 共 2445 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

倚天杖

手记
篇
粉丝
47
获赞与收藏
187

关注作者，订阅最新文章

相关文章推荐

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消