html页面
下面是星星图片可以使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body,ul,li{
padding: 0;
margin: 0;
}
li{
list-style: none;
float:left;
width:27px;
height: 28px;
background: url(star.gif) no-repeat 0 0;
}
#txt{
color: red;
text-indent: 30px;
line-height: 28px;
}
</style>
</head>
<body>
<ul id="box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="txt"></div>
</body>
</html>
js
<script type="text/javascript">
let oUl = document.getElementById("box");
let aLi = oUl.children;
let oTxt = document.getElementById("txt");
let flag = false;
let index = 0;
let arr = ["菜鸡","一般","还行","好","很好"]
for(let i = 0;i<aLi.length;i++){
aLi[i].onmouseover = function(){
for(let j=0;j<aLi.length;j++){
aLi[j].style.backgroundPosition = "0 0";
}
for(let j = 0;j<=i;j++){
aLi[j].style.backgroundPosition = "0 -28px"
}
oTxt.innerHTML = arr[i];
}
aLi[i].onmouseout = function(){
for(let j=0;j<aLi.length;j++){
aLi[j].style.backgroundPosition = "0 0";
}
oTxt.innerText="";
if(flag){
for(var i = 0 ;i<=index;i++){
aLi[i].style.backgroundPosition = "0 -28px"
}
oTxt.innerText = arr[index];
}
}
aLi[i].onclick = function(){
flag = true;
index = i;
}
}
</script>