老板昨天开会说:要给公司的购物平台增加信用评价功能，用户体验参考淘宝。
于是今天研究了一下，用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> |