本文實例講述了Javascript模仿淘寶信用評價實現方法。分享給大家供大家參考，具體如下：
老板昨天開會說:要給公司的購物平臺增加信用評價功能，用戶體驗參考淘寶。
于是今天研究了一下，用jQuery模似一個類似的效果:
代碼如下:
<!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>模仿淘寶的信用評價</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>完整實例代碼代碼點擊此處本站下載。
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
