Tip: you can modify some code before running
<!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><title>Cool star rating</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">. User_rate {font-size: 14px; position: relative; padding: 10px 0 ;}. user_rate p {margin: 0; padding: 0; display: inline; height: 40px; overflow: hidden; position: absolute; top: 0; left: 100px; margin-left: 140px ;}. user_rate p span. s {font-size: 36px; line-height: 36px; float: left; font-weight: bold; color: # DD5400 ;}. user_rate p span. g {font-size: 22px; display: block; float: left; color: # DD5400;}/* rating */. big_rate_bak {width: 140px; height: 28px; text-align: left; position: absolute; top: 3px; left: 85px; display: inline-block; background: url (yun_qi_img/20100526183731.gif) left-32px repeat-x ;}. big_rate_bak B {display: inline-block; width: 28px; float: left; height: 28px; position: relative; z-index: 1000; cursor: pointer; overflow: hidden ;}. big_rate_up {width: 140px; height: 28px; position: absolute; top: 0; left: 0; background: url (yun_qi_img/20100526183731.gif) left top ;}</style><script type="text/javascript" src="http://www.111cn.net/demo/jquerys.js"></script></head><body>An error is prompted in the lower left corner of the preview result, and the effect is invisible. Refresh the page to see the effect. Of course, this problem does not occur in actual use.<br><!--把下面代码加到<body>与</body>之间--><div class="user_rate"> <div class="big_rate_bak"> <b rate="2" onclick="javascript:up_rate(20);"> </b> <b rate="4" onclick="javascript:up_rate(40);"> </b> <b rate="6" onclick="javascript:up_rate(60);"> </b> <b rate="8" onclick="javascript:up_rate(80);"> </b> <b rate="10" onclick="javascript:up_rate(100);"> </b> <div class="big_rate_up"></div> </div> <p></p></div><script type="text/javascript">$ (Function () {get_rate (88) ;}) function get_rate (rate) {rate = rate. toString (); var s; var g; $ ("# g "). show (); if (rate. length> = 3) {s = 10; g = 0; $ ("# g "). hide ();} else if (rate = "0") {s = 0; g = 0;} else {s = rate. substr (0, 1); g = rate. substr () ;}$ ("# s "). text (s); $ ("# g "). text (". "+ g); $ (". big_rate_up "). animate ({width :( parseInt (s) + parseInt (g)/10) * 14, height: 26}, 1000); $ (". big_rate_bak B "). each (function () {$ (this ). mouseover (function () {$ (". big_rate_up "). width ($ (this ). attr ("rate") * 14); $ ("# s "). text ($ (this ). attr ("rate"); $ ("# g "). text ("");}). click (function () {$ ("# f "). text ($ (this ). attr ("rate"); $ ("# my_rate "). show () ;})} $ (". big_rate_bak "). mouseout (function () {$ ("# s "). text (s); $ ("# g "). text (". "+ g); $ (". big_rate_up "). width (parseInt (s) + parseInt (g)/10) * 14);})} function up_rate (rate) {$ (". big_rate_up "). width ("0"); get_rate (rate );}</script></body></html>
Tip: you can modify some code before running