css样式
/* star */
#star2,
#star1,
#star {
position: relative;
width: 600px;
height: 32px;
ul,
span {
line-height: 23px;
display: inline;
float: left;
height: 23px;
}
ul {
margin: 0 10px;
padding-left: 10px;
list-style: none;
}
li {
float: left;
width: 24px;
list-style: none;
cursor: pointer;
text-indent: -9999px;
background: url(../img/star.png) no-repeat 0 -23px;
}
.on {
background-position: 0 -48px;
}
.on1 {
background-position: 0 0;
}
.on2{
background-position: 0 -75px;
}
strong {
padding-left: 10px;
color: #f60;
}
p
{
position: absolute;
z-index: 999;
top: 20px;
display: none;
width: 200px;
height: 100px;
padding: 20px;
background: url(../img/icon.gif) no-repeat;
em
{
font-style: normal;
display: block;
color: #f60;
}
}
}
.star_wrapper
{
display: inline-block;
width: 650px;
margin-top: 20px;
}
function star(name,type){
var oStar = document.getElementById(name);
var aLi = oStar.getElementsByTagName("li");
var oUl = oStar.getElementsByTagName("ul")[0];
var oSpan = oStar.getElementsByTagName("span")[1];
var oP = oStar.getElementsByTagName("p")[0];
var i = iScore = iStar = 0;
var aMsg = {
type1: [
"很不满意|差得太离谱,与卖家描述的严重不符,非常不满",
"不满意|部分有破损,与卖家描述的不符,不满意",
"一般|质量一般,没有卖家描述的那么好",
"满意|质量不错,与卖家描述的基本一致,还是挺满意的",
"非常满意|质量非常好,与卖家描述的完全一致,非常满意"
],
type2: [
"很不满意|卖家态度很差,说脏话,简直不把顾客当回事。",
"不满意|卖家有点不耐烦,承诺的服务也兑现不了;",
"一般|卖家回复很慢,态度一般,谈不上沟通顺畅;",
"满意|卖家服务挺好的,沟通挺顺畅的,总体满意;",
"非常满意|卖家的服务太棒了,考虑非常周到,完全超出期望值;"
],
type3: [
"很不满意|物流公司态度还好吧,送货速度挺快的;",
"不满意|物流公司态度还好吧,送货速度挺快的;",
"一般|物流公司服务态度一般,运送速度一般;",
"满意|物流公司服务态度挺差,运送速度太慢;",
"非常满意|物流公司态度非常差,送货慢,外包装有破损。 "
]
};
for (i = 1; i <= aLi.length; i++){
aLi[i - 1].index = i;
//鼠标移过显示分数
aLi[i - 1].onmouseover = function (){
fnPoint(this.index);
//浮动层显示
oP.style.display = "block";
//计算浮动层位置
oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
//匹配浮动层文字内容
oP.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg["type"+type][this.index - 1].match(/(.+)\|/)[1] + "</em>" + aMsg["type"+type][this.index - 1].match(/\|(.+)/)[1]
};
//鼠标离开后恢复上次评分
aLi[i - 1].onmouseout = function (){
fnPoint();
//关闭浮动层
oP.style.display = "none"
};
//点击后进行评分处理
aLi[i - 1].onclick = function (){
iStar = this.index;
oP.style.display = "none";
oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg["type"+type][this.index - 1].match(/\|(.+)/)[1] + ")"
}
}
//评分处理
function fnPoint(iArg){
//分数赋值
iScore = iArg || iStar;
for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";
}
};
star("star",1);
star("star1",2);
star("star2",3);
我希望这个ul>li列表加一点东西
比如 li class="on" 改为li class="on1" 这样可以改变灰色的
第五个li class="on"改为li class="on2" 可以显示红色。
我用背景定位的。
求高手帮我改下js 。
业精于勤,荒于嬉;行成于思,毁于随。