我用的是背景图片的星星,通过改变背景定位的位置,改变星星的样式
html结构代码:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
css样式代码:
<style type="text/css">
body,ul,li{
padding: 0;
margin: 0;
}
li{
list-style: none;
float: left;
width: 27px;
height: 28px;
background: url(img/star.gif) no-repeat 0 0;
}
</style>
js的实现代码:
<script type="text/javascript">
var aLi = document.getElementsByTagName('li');
var flag = false;
var index = 0; //表示点击了哪个星星
//给每个星星鼠标进入和离开事件
for(let i = 0; i < aLi.length; i++){
aLi[i].onmouseover = function(){
//让所有的回到原始状态
for(var j = 0; j < aLi.length; j++){
//用的是背景图,改变定位信息即可
aLi[j].style.backgroundPosition = "0 0";
}
//让鼠标之前的点亮
for(var j = 0; j <= i; j++){
aLi[j].style.backgroundPosition = "0 -28px";
}
}
aLi[i].onmouseout = function(){
for(var j = 0; j < aLi.length; j++){
aLi[j].style.backgroundPosition = "0 0";
}
//判断是否被点击
if(flag){
for(var j = 0; j <= index; j++){
aLi[j].style.backgroundPosition = "0 -28px";
}
}
//添加点击事件
aLi[i].onclick = function(){
flag = true;
index = i; //保存点击的索引值
}
}
</script>