Tip: you can modify some code before running
Javascript Taobao star rating<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>Javascript Taobao star rating</title> <style type="text/css">Ul, li {margin: 0; padding: 0; border: 0 ;}. shop-rating {height: 25px; overflow: hidden; zoom: 1; padding: 2px 0; position: relative; z-index: 999; font: 12px arial; color: #000; line-height: 1.2em }. shop-rating span {height: 23px; display: block; line-height: 23px; float: left ;}. shop-rating span. title {width: 125px; text-align: right; margin-right: 5px ;}. shop-rating ul {float: left ;}. shop-rating. result {margin-left: 20px; padding-top: 2px ;}. shop-rating. result span {color: # ff6d02 ;}. rating-level ,. rating-level a {background: url (yun_qi_img/20100707172710.png) no-repeat scroll 1000px 1000px ;}. rating-level {background-position: 0px 0px; width: 120px; height: 23px; position: relative; z-index: 1000 ;}. shop-rating. result em {color: # f60; font-family: arial; font-weight: bold ;}. rating-level li {display: inline ;}. rating-level a {line-height: 23px; height: 23px; position: absolute; top: 0px; left: 0px; text-indent:-999em; * zoom: 1; outline: none ;}. rating-level. one-star {width: 20%; z-index: 6 ;}. rating-level. two-stars {width: 40%; z-index: 5 ;}. rating-level. three-stars {width: 60%; z-index: 4 ;}. rating-level. four-stars {width: 80%; z-index: 3 ;}. rating-level. five-stars {width: 100%; z-index: 2 ;}. rating-level. current-rating ,. rating-level a: hover {background-position: 0-28px }. rating-level. one-star: hover ,. rating-level. two-stars: hover ,. rating-level. one-star.current-rating ,. rating-level. two-stars.current-rating {background-position: 0-pixel px ;}. rating-level. three-stars. current-rating ,. rating-level. four-stars. current-rating ,. rating-level. five-stars. current-rating {background-position: 0-28px ;}</style> </head> <body> <div class="shop-rating">Your comment on my character:<ul class="rating-level" id="stars2"> <li>20</li> <li>40</li> <li>60</li> <li>80</li> <li>100</li> </ul> <input type="hidden" id="stars2-input" name="b" value="" size="2" /> </div> <script> var tb = function() { var t$ = function(id) { return document.getelementbyid(id) } var t$$ = function(r, t) { return (r || document).getelementsbytagname(t) } var stars = function(cid, rid, hid, config) { var lis = t$$(t$(cid), 'li'), cura; for (var i = 0, len = lis.length; i < len; i++) { lis[i]._val = i; lis[i].onclick = function() { t$(rid).innerhtml = '<em>' + (t$(hid).value = t$$(this, 'a')[0].getattribute('star:value')) + '分</em> - ' + config.info[this._val]; cura = t$$(t$(cid), 'a')[t$(hid).value / config.step - 1]; }; lis[i].onmouseout = function() { cura && (cura.classname += config.curcss); } lis[i].onmouseover = function() { cura && (cura.classname = cura.classname.replace(config.curcss, '')); } } }; return {stars: stars} }().stars('stars2', 'stars2-tips', 'stars2-input', { 'info' : ['人品极差', '人品不咋地', '人品一般吧', '人品不错', '人品极好啊'], 'curcss': ' current-rating', 'step': 20 }); </script> </body> </html>
Tip: you can modify some code before running
