Javascript Taobao rating Lite version

【 Program Source code]
This effect is mainly reflected in the combination of CSS and JavaScript.
CSS Code Copy code The Code is as follows: 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 {
Background: URL (http://files.jb51.net/demoimg/201007/o_star.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 {
Line-Height: 23px;
Height: 23px;
Position: absolute;
Top: 0px;
Left: 0px;
Text-indent:-999em;
* ZOOM: 1;
Outline: none;
}
. Rating-Level A. One-star {
Width: 20%;
Z-index: 6;
}
. Rating-Level A. Two-stars {
Width: 40%;
Z-index: 5;
}
. Rating-Level A. Three-stars {
Width: 60%;
Z-index: 4;
}
. Rating-Level A. Four-stars {
Width: 80%;
Z-index: 3;
}
. Rating-Level A. 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 ;}

HTML StructureCopy codeThe Code is as follows: <Div class = "Shop-rating">
<SPAN class = "title"> your comments on my character: </span>
<Ul class = "rating-level" id = "stars2">
<Li> <a href = "javascript: void (0);" class = "one-star" Star: value = "20"> 20 </a> </LI>
<Li> <a href = "javascript: void (0);" class = "two-Stars" Star: value = "40"> 40 </a> </LI>
<Li> <a href = "javascript: void (0);" class = "Three-Stars" Star: value = "60"> 60 </a> </LI>
<Li> <a href = "javascript: void (0);" class = "four-Stars" Star: value = "80"> 80 </a> </LI>
<Li> <a href = "javascript: void (0);" class = "five-Stars" Star: value = "100"> 100 </a> </LI>
</Ul>
<Span id = "stars2-tips" class = "result"> </span>
<Input type = "hidden" id = "stars2-input" name = "B" value = "" size = "2"/>
</Div>

JavaScript codeCopy code The Code is as follows: 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 $ (CID), 'lil'), 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') + 'points </em>-'+ config.info [this. _ Val];
Cura = 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-tids', 'stars2-input ',{
'Info': ['bad character ', 'bad character', 'good character ', 'good character'],
'Curcss ': 'Current-rating ',
'Step': 20
});

Code Demonstration:Xmlns = "http://www.w3.org/1999/xhtml">

Your comment on my character:

• 20
• 40
• 60
• 80
• 100