简单实现评价星级

星级评价实现方法

本节内容是关于如何实现星级评价，在我们当前的生活中，我们在购买某件产品或者乘坐滴滴车，都会让我们给出一个评价，我们可以给这个产品或者服务打分，通常是一到五颗星，那么这是如何实现的呢？

• 首先，我们要准备好一张展示图：
  
• 我们可以看到这张图上有两颗大小相等的星星，但是一个是灰色的，一个是金黄色的，是被点亮的。那么我们为什么要准备这么一张图呢，它有什么用处呢？
• 在这之前，我们需要明白我们平时给评价时是怎样的展示效果
  一般而言，我们在给评价时，我们的鼠标放在哪一颗星上，那么包括这一颗星在内的前几颗星都会被点亮，当我们鼠标移出时，所有星星都会暗下去，当我们点击某一颗星时，那么包括这这一颗星在内的前几颗星都会一直处于点亮状态，并且在未提交之前，都可以通过鼠标点击改变星级。
  
• 那么这里如何实现点亮呢？我们就可以通过一开始准备好的这张图来进行展示，首先我们通过css样式将其设置为背景图，然后设置其摆放位置，通过上下平移调整展示区域，这里我们就可以设置两个css样式，可以通过类选择符或者id选择符去设置样式，一个样式设置上半边灰色星星为背景图，另一个样式设置下半边金黄色星星为背景图，当我们需要点亮这颗星星的时候，就可以去改变当前标签的属性名称
• 样式代码：

		.aa{width: 30px;height: 30px;float: left;background-image: url(./image/star.gif);background-repeat: no-repeat;}.bb{width: 30px;height: 30px;float: left;background-image: url(./image/star