效果图
css部分
li{
list-style: none;
display: inline-block;
width: 27px;
height: 27px;
background: url(img/star.gif) no-repeat 0px 0px;
}
html部分
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
js部分
<script type="text/javascript">
window.onload=function(){
var arr=document.getElementsByTagName("li");
for(let i=0;i<arr.length;i++){
arr[i].index=i;//将索引值当作对象的属性绑定
arr[i].onclick=function(){
for(let j=0;j<arr.length;j++){//遍历使所有的星星变暗
arr[j].style.backgroundPosition="0px 0px";
}
for(let j=0;j<this.index+1;j++){//根据所点的星星所在位置，使前边的星星变亮
arr[j].style.backgroundPosition="0px -29px";
}
}
}
}
</script>
124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
