<!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"> | |
<script src="jquery-3.4.1.min.js"></script> | |
<title>打星星评分</title> | |
<style> | |
*{ | |
margin: 0; | |
padding: 0; | |
} | |
.content1,.content2{ | |
display: inline-block; | |
} | |
.content1{ | |
margin-left: 50px; | |
margin-top: 20px; | |
} | |
.content2{ | |
position: relative; | |
left: 0; | |
top: -9px; | |
} | |
span{ | |
display: none; | |
color: red; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="content1"> | |
<img src="empty.png" alt="1"> | |
<img src="empty.png" alt="2"> | |
<img src="empty.png" alt="3"> | |
<img src="empty.png" alt="4"> | |
<img src="empty.png" alt="5"> | |
</div> | |
<div class="content2"> | |
<span>很差</span> | |
<span>较差</span> | |
<span>一般</span> | |
<span>较好</span> | |
<span>很好</span> | |
</div> | |
<script> | |
let i=-1; | |
let over = function(){ | |
$("img").attr("src","empty.png"); | |
$("span").css("display",'none'); | |
let index = $(this).index(); | |
$(this).attr("src","shining.png"); | |
$(`img:lt(${index})`).attr("src","shining.png"); | |
$("span").css("display",'none'); | |
$("span").eq(index).css("display","inline"); | |
} | |
let out = function(){ | |
let index = $(this).index(); | |
$(this).attr("src","empty.png"); | |
$(`img:lt(${index})`).attr("src","empty.png"); | |
$("span").css("display",'none'); | |
if(i !=-1){ | |
$("img").attr("src","empty.png"); | |
$("span").css("display",'none'); | |
$("img").eq(i).attr("src","shining.png"); | |
$(`img:lt(${i})`).attr("src","shining.png"); | |
$("span").eq(i).css("display","inline"); | |
} | |
} | |
$("img").hover(over,out); | |
$("img").click(function(){ | |
$("img").off("hover"); | |
let index = $(this).index(); | |
i=index; | |
console.log(index); | |
$(this).attr("src","shining.png"); | |
$(`img:lt(${index})`).attr("src","shining.png"); | |
$("span").css("display",'none'); | |
$("span").eq(index).css("display","inline"); | |
}); | |
</script> | |
</body> | |
</html> |
打星星评分
猜你喜欢
转载自www.cnblogs.com/tcq43356/p/11570064.html
今日推荐
周排行