Javascript模仿淘宝信用评价实例（附源码）

本文实例讲述了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程序设计有所帮助。