//星级图片为雪碧图,上为满星,下为空星,每个星高14px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
<script>
$("body").append(createStar());
function createStar(){
var div=$("<div></div>").data("index",-1).width(70).height(14).css({
float:"left"
});
for(var i=0;i<5;i++){
$("<div></div>").appendTo(div)
.css({
width:14,
height:14,
float:"left",
backgroundImage:"url(./img/commstar02.png)",
backgroundPositionY:-14
}).hover(function(e){
var index0=div.data("index");
var index1=Array.from(div.children()).indexOf(this);
if(index1<index0) return;
$(this).css({
backgroundPositionY:0
}).prevAll().css({
backgroundPositionY:0
});
$(this).nextAll().css({
backgroundPositionY:-14
})
},function(){
var index=div.data("index");
if(index===-1){
div.children().css({
backgroundPositionY:-14
})
}else{
div.children().slice(0,index).css({
backgroundPositionY:0
});
div.children().slice(index+1).css({
backgroundPositionY:-14
})
}
}).click(function(e){
var index=Array.from(div.children()).indexOf(this);
div.data("index",index);
div.children().slice(0,index).css({
backgroundPositionY:0
});
div.children().slice(index+1).css({
backgroundPositionY:-14
})
})
}
return div;
}
</script>
</body>
</html>