1,首先下载星星的图片
下载logo的网址 https://icomoon.io/
2,使用雪碧图
雪碧图合成地址 https://www.toptal.com/developers/css/sprite-generator
.bg-star_o { width: 26px; height: 28px; background: url('css_sprites.png') -10px -10px; }
.bg-star { width: 26px; height: 28px; background: url('css_sprites.png') -10px -58px; }
.bg-star_half_empty { width: 26px; height: 28px; background: url('css_sprites.png') -10px -106px; }
最后生成的雪碧图:
3,简单代码(没有使用事件委托的js实现)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>stars</title>
<style>
body,ul,li{
margin:0;
padding:0;
}
li{
list-style: none;
}
.rating{
height:28px;
width:130px;
margin:100px auto;
}
.rating-item{
float:left;
height:28px;
width:26px;
background: url('starSprite.png') -10px -10px no-repeat;
cursor: pointer;
}
</style>
</head>
<body>
<ul id="rating" class="rating">
<li class="rating-item" title="bad"></li>
<li class="rating-item" title="notgood"></li>
<li class="rating-item" title="soso"></li>
<li class="rating-item" title="good"></li>
<li class="rating-item" title="excellent"></li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
var num =2;
var $rating = $('#rating');
var $item = $rating.find('.rating-item');
var lightOn = function(num){
$item.each(function(index){
if(index < num){
$(this).css('background-position','-10px -58px');
}else{
$(this).css('background-position','-10px -10px');
}
})
}
lightOn(num);
//给每个星星都绑定事件,造成浪费,应该用事件委托
$item.mouseover(function(){
lightOn($(this).index()+1);
}).click(function(){
num = $(this).index()+1;
});
$rating.mouseout(function(){
lightOn(num);
});
</script>
</body>
</html>
4,改进代码
使用事件委托,使用一个自执行函数可以避免全局变量的污染,避免全局变量污染
编写成一个可复用方法,同时编写为Jquery插件,两种调用方法
//使用一个自执行函数可以避免全局变量的污染
//可复用方法
var rating = (function(){
var lightOn = function($item,num){
$item.each(function(index){
if(index < num){
$(this).css('background-position','-10px -58px');
}else{
$(this).css('background-position','-10px -10px');
}
})
}
var init = function(el,num){
var $rating = $(el);
var $item = $rating.find('.rating-item');
lightOn($item,num);
//给每个星星都绑定事件,造成浪费,应该用事件委托
$rating.mouseover(function(e){
var ev = e || window.event;
var target = ev.target || ev.srcElement;
lightOn($item,parseInt(target.id)+1);
}).click(function(e){
var ev = e || window.event;
var target = ev.target || ev.srcElement;
num = parseInt(target.id)+1;
}).mouseout(function(){
lightOn($item,num);
});
}
//Jquery插件编写
$.fn.extend({
rating:function(num){
//为了连缀需要返回this,遍历返回
return this.each(function(){
init(this,num)
})
}
})
return {
init:init
}
})();
rating.init('#rating',2);
$('#rating').rating(4);
扫描二维码关注公众号,回复:
4184255 查看本文章