HTML is as follows:
<div class= "starts" >
<ul id= "Pingstar" >
<li rel= "1" title= "particularly bad, give 1 points" ></li>
< Li rel= "2" title= "very poor, give 2 points" ></li>
<li rel= "3" title= "General, to 3 points" ></li>
<li rel= "4" title= "Very good, give 4 points" ></li>
<li rel= "5" title= "very good, give 5 points" ></li>
<span id= "dir" ></span>
</ul>
<input type= "hidden" value= "id=" STARTP ">
</div>
CSS style:
. starts,.starts Ul{float:left;
STARTS{PADDING-LEFT:16PX;PADDING-TOP:7PX}
. Starts UL Li{width:32px;height:31px;float:left;background: #ddd;p adding-right:3px;
Starts UL li.on{background:red;
Starts UL span{display:inline;float:left;padding-left:10px;height:31px;line-height:31px;}
The last JS call is as follows:
Window.onload = function () {
var s = document.getElementById ("Pingstar"),
m = document.getElementById (' dir '), C3/>n = S.getelementsbytagname ("Li"),
input = document.getElementById (' STARTP ');//Save selected value
ClearAll = function ( {for
(var i = 0; i < n.length i++) {
n[i].classname = ';
}
}}
for (var i = 0; i < n.length i++) {
N[i].onclick = function () {
var q = this.getattribute ("rel");
ClearAll ();
Input.value = q;
for (var i = 0; i < Q; i++) {
n[i].classname = ' on ';
}
m.innerhtml = This.getattribute ("title");
}
N[i].onmouseover = function () {
var q = this.getattribute ("rel");
ClearAll ();
for (var i = 0; i < Q; i++) {
n[i].classname = ' on ';
}
}
N[i].onmouseout = function () {
clearall ();
for (var i = 0; i < Input.value; i++) {
n[i].classname = ' on ';
}
}
}
}
View Demo http://demo.jb51.net/js/2014/jsxxdf/
If you prefer to use jquery based star scoring effect, you can refer to this address: http://www.jb51.net/jiaoben/195077.html