简易的星级评分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>星星评分demo3</title>
<style>
*{
padding:0;
margin:0;
}
li{
list-style: none;
width: 30px;
height: 30px;
float: left;
background: url(img/star.gif) no-repeat 0 0;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span></span>
<script src="js/jquery.js"></script>
<script>
$(function(){
var a=["很差","差","一般","好","很好"];
var index=null;
$("li").hover(function(){
$(this).css("background-position","0 -28px").nextAll("li").css("background-position","0 0");
$(this).prevAll().css("background-position","0 -28px");
$("span").html(a[$(this).index()]);//填充相应的文字
},function(){
if(index==null){
$("li").css("background-position","0 0");
$("span").html("");
}else{
$("li").eq(index).css("background-position","0 -28px").nextAll("li").css("background-position","0 0");
$("li").eq(index).prevAll().css("background-position","0 -28px");
$("span").html(a[$(this).index()]);//填充相应的文字
}
});
$("li").click(function(){
index=$(this).index();//点击的时候记下当前的index
$(this).css("background-position","0 -28px").nextAll("li").css("background-position","0 0");
$(this).prevAll().css("background-position","0 -28px");
$("span").html(a[$(this).index()]);//填充相应的文字
})
})
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017.11.01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
