手记

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" src="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 src="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>
0人推荐
随时随地看视频
慕课网APP