在这里和朋友们分享一个使用js实现商城星星评分的效果，希望能给大家点帮助，当然更好的特效还有待大家完善。
html如下：
rush:xhtml;">
css样式：
rush:css;">
.starts,.starts ul{float:left;}
.starts{padding-left:16px;padding-top:7px;}
.starts ul li{width:32px;height:31px;float:left;background:#ddd;padding-right:3px;}
.starts ul li.on{background:red;}
.starts ul span{display:inline;float:left;padding-left:10px;height:31px;line-height:31px;}
最后js调用如下:
rush:js;">
window.onload = function () {
var s = document.getElementById("pingStar"),m = document.getElementById('dir'),n = s.getElementsByTagName("li"),input = document.getElementById('startP'); //保存所选值
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';
}
}
}
}
以上就是本文的全部内容，希望对大家的学习jquery程序设计有所帮助。
