效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none;
}
li{
float:left;
width:27px;
height:28px;
background-image:url(img/star.gif);
}
</style>
</head>
<body style="height:1000px; width:1000px;">
<ul id="ul1" >
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="div">0</div>
</body>
</html>
<script type="text/javascript" src="tools/util.js"></script>
<script type="text/javascript">
//功能：以某个数字为分界线把前面的变黄，后面的变灰
function changeColor(ord){
let lis = $("ul1").children;
for(let j=0;j<ord;j++){
//变黄
lis[j].style.backgroundPosition = "0px -28px";
}
for(let j=ord;j<lis.length;j++){
//变灰
lis[j].style.backgroundPosition = "0px 0px";
}
}
window.onload = function(){
let lis = $("ul1").children;
let score = 0;
for(let i=0;i<lis.length;i++){
lis[i].onmouseover = function(){
for(let j=0;j<=i;j++){
lis[j].style.backgroundPosition = "0px -28px";
}
}
lis[i].onmouseout = function(){
if(score<=0){
for(let j=0;j<lis.length;j++){
lis[j].style.backgroundPosition = "0px 0px";
}
}else{
changeColor(score);
}
}
lis[i].onclick = function(){
score = i+1;
$("div").innerHTML = score;
changeColor(score);
}
}
}
</script>
397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
