亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

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>
點擊查看更多內容
為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習，寫下你的評論
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消