您的位置：首页 > 其它

初步星型评分实现

2017-06-21 17:41 99 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
margin: 0;
padding:0;
}
ul,ol{
list-style-type: none;
}
ul li{
width:35px;
height:35px;
display: inline-block;
cursor:pointer;
}
ul{
margin:100px auto;
width:200px;
height:35px;
}
.star{
background:url('../image/iVPGGC.png') no-repeat;
}
</style>
<body>
<ul id="rating">
<li class="star" title="很差"></li>
<li class="star" title="差"></li>
<li class="star" title="一般"></li>
<li class="star" title="好"></li>
<li class="star" title="很好"></li>
</ul>
<ul id="rating2">
<li class="star" title="很差"></li>
<li class="star" title="差"></li>
<li class="star" title="一般"></li>
<li class="star" title="好"></li>
<li class="star" title="很好"></li>
</ul>
</body>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var test = (function(){
var lightingStar = function($star,num){
$star.each(function(index){
if(index<num){     //小于2的时候点亮
$(this).css("background-position","0 -40px");
}else{
$(this).css("background-position","0 0");
}
})
}
var init = function(el,num){
var $rating = $(el);
var $star = $rating.find(".star");
lightingStar($star,num);
$rating.on("mouseover",".star",function(){   //解决每个元素都绑定事件的问题，采用事件委托
lightingStar($star, $(this).index()+1);
}).on("click",".star",function(){
num =$(this).index()+1; //记录当前电铃个数
}).on("mouseout",function(){
lightingStar($star,num);
})

}
$.fn.extend({
rating:function(num){
return this.each(function(){
init(this,num)
})
}
})
return {
init:init
}
})()
$("#rating").rating(3);
$("#rating2").rating(4);

</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航