"Program Source"
This effect is mainly reflected in the combination of CSS and JavaScript
CSS Code
Copy Code code 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 a {
Background:url (yun_qi_img/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 a {
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 a.one-star:hover,.rating-level A.two-stars:hover,.rating-level a.one-star.current-rating,. Rating-level a.two-stars.current-rating{background-position:0 -116px;}
. rating-level. Three-stars. Current-rating,.rating-level. Four-stars. Current-rating,.rating-level. Five-stars. Current-rating{background-position:0 -28px;}
HTML structure
Copy Code code as follows:
<div class= "Shop-rating" >
<span class= "title" > Your evaluation of my character:</span>
<ul class= "Rating-level" id= "Stars2" >
<li><a href= "javascript:void (0);" class= "One-star" star:value= ">20</a></li>
<li><a href= "Javascript:void" (0); "class=" Two-stars "star:value=" >40</a></li>
<li><a href= "Javascript:void" (0); "class=" Three-stars "star:value=" >60</a></li>
<li><a href= "javascript:void (0);" class= "Four-stars" star:value= ">80</a></li>
<li><a href= "Javascript:void" (0); "class=" Five-stars "star:value=" >100</a></li>
</ul>
<span id= "stars2-tips" class= "Result" ></span>
<input type= "hidden" id= "Stars2-input" name= "B" value= "" size= "2"/>
</div>
JavaScript code
Copy Code code 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$$ (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 ')] + ' minute </em>-' + Co Nfig.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 ': [' character is very bad ', ' character not how ', ' character General ', ' good character ', ' very good character '],
' Curcss ': ' current-rating ',
' Step ': 20
});
Code Demo:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> Taobao scoring effect </title> <style type=" Text/css "> ul, li {margin:0; padding:0; bo rder: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/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 a {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 A.one-star:hover. Rating-level A.two-stars:hover,.rating-level A.one-star.current-rating,.rating-level a.two-stars.current-rating{ Background-position:0 -116px;} . rating-level. Three-stars. Current-rating,.rating-level. Four-starS. Current-rating,.rating-level. Five-stars. current-rating{background-position:0 -28px; </style> </pead> <body> <div class= "shop-rating" > <span class= "title" > Your evaluation of my character: </ span> <ul class= "Rating-level" id= "stars2" > <li>20</li> <li>40</li> <li>60 </li> <li>80</li> <li>100</li> </ul> <span id= "stars2-tips" class= "result" ></span> <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 ') + ' min </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 '): [' Very bad character ', ' good character ', ' character General ', ' nice character ', ' excellent character '], ' curcss ': ' Curre Nt-rating ', ' Step ': 20}); </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
