在很多项目中我们都会遇到五星评分这种需求，可以显示一颗星、半颗星或1/3颗星，那如何实现类似下图的效果呢？
五星评分效果图.png
实现的方法可能很多种，这里记录是我觉得最优的一种方案：用sprite（俗称精灵图）来实现。
所谓的精灵图,其实就是将很多的图标集中在一张图片上，然后通过定位选择需要的图标。
精灵图的优点：能够减少浏览器的请求次数，加快访问次数。把所有的图标集中放到一张大图就只需要请求一次，当浏览器需要用图标时再从大图上解析。
精灵图实现五星评分的思路：两层图片叠加，上面为彩色，通过width的值来控制彩色星星数量。
1、首先我们来准备一张精灵图（如何制作精灵图请看后边）
star.png
2、html结构(div里嵌套一个span)
<div>
<span>
</span>
</div>
- div的作用是设置灰色星星背景，span的作用是用来通过控制span的width值(width:20%显示一颗星星；40%显示两颗星星....)来显示彩色星星。（通过background-position来设置）
- div设置的宽高是五颗星星在一起的宽高，span设置的高度是一颗星星的高度。
3、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>精灵图实现五星评分</title>
<style>
/*div要放五颗灰色的星星作为背景 */
div{
/* div的宽高是五颗星星的宽高，我这里的一颗星星宽高都是14px */
width: 70px;
height: 14px;
background: url("./img/star.png");
/* 通过设置background-position在精灵图上找到需要的图片 */
background-position: -2px -22px;
}
/*span要放五颗菜色的星星作为背景，然后通过span的宽度设置显示彩色星星的的长度 */
span{
display: block;
height: 14px;
background: url("./img/star.png");
background-position: -2px -5px;
}
</style>
</head>
<body>
<div>
<span style="width:25%">
</span>
</div>
</body>
</html>
补充：
background-positon的值要在ps里面找：
background-position.png
4、如何在ps中制作精灵图？
①首先选择一张有星星的psd图片，如下，并用ps打开;
image.png
②切取一颗星星：将图片放大（放大快捷键：Ctrl++），选择“切片工具”;
切片一颗星星
③复制你刚切片的星星，新建一个新的图层（新建图层快捷键：Ctrl+n），将复制的星星粘贴到新的图层;
复制切片的星星
④消除多余的像素(也就擦除你不需要的地方):选择左侧菜单的“矩形选框工具”；
新图层粘贴切片星星
擦除多余的地方
⑥擦除完之后是这样子的，然后你在这个图层再复制5个一样的就OK了：
最后完成的擦除效果
复制五颗星星
灰色的星星也是以此类推的做法，最后做好的效果如下图,精灵图制作完之后就可以按照开头的做法完成“五星评分”了。
star.png
这边只是梳理有道笔记记录之前在学习过程中一些小经验，可能会有错，望大神指点。（当然这五星评分只是静态的，暂时没有加hover和点击的效果）
网友评论