css 实现评分效果

Posted 2020-06-10

　　css实现评分效果，其实是css sprites （css精灵）的延伸应用，效果的实现主要是由  background-position 属性移动图片位置。之前看到有前辈写过关于这方面的内容，在理解上稍有偏差。

　　我的理解：有人认为background-position  的位置移动中，这个属性相当于大图片不动，把div的顶点进行移动，移动到目标小图的顶点位置，

可参见：http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111704.html        ，我个人认为应该是div位置不变，变得是图片的位置，通过background-position将所需要的小图标定位到div的 0 ，0 位置从而完成小图标显示。并且，移动中  background-position  的值是要变为负值的，说明图片是向上移动的。

单图标定位 在上边的博客写的很详细，所以直接写  五星评分效果实现：

 为了更好弄明白，把图加工了一下：

第一步：

养成良好编程习惯将每部分功能放进一个独立部分进行封装，所以在此直接 设置一个div元素:

<div class="rating">

</div>

 

第二步：

由于五星评分需要五个不带边框的方块，很自然要想将五个方块统一起来使用 ul 和 li标签最好，由于实现点击效果，承载元素为 a 标签：

<div class="rating">
    <ul>
        <li class="one">   <a href="#">1</a></li>
        <li class="two">   <a href="#">2</a></li>
        <li class="three"> <a href="#">3</a></li>
        <li class="four">  <a href="#">4</a></li>
        <li class="five">  <a href="#">5</a></li>
    </ul>
</div>

第三步：

结构搭好后开始进行 css 的设计：

 

ul.rating {
    position: relative;
    list-style: none;
    background: url("../images/star-matrix.gif") no-repeat 0 0;
    width: 80px;
    height: 16px;
}
ul.rating li {
    float: left;
    text-indent: -9999px;
    cursor: pointer;
}
ul.rating li a {
    text-decoration: none;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;/* 与  hover  中的z-index 对比实现另一重要效果，见下边说明  初步设计时可不考虑*/
}

/*仅仅是将 A 标签的区域定位至该出现的 UL 区域之中*/
ul.rating li.one a {top: 0;  left: 0;}
ul.rating li.two a {top:0px;  left: 16px;}
ul.rating li.three a {top:0px;  left: 32px;}
ul.rating li.four a {top:0px;  left: 48px;}
ul.rating li.five a {top: 0px;  left: 64px;}

第四步：通过以上代码基本上完成了初步效果，接下来是鼠标划过小星星时的效果：

思想是，在鼠标放在当前 A 标签时，A 标签的区域 变得 和 UL 区域一样大，通过background-position 属性定位到所对应的效果图片，并将其盖在之前空白星星上。


ul.rating li a:hover{
    width: 80px;
    height: 16px;
    overflow: hidden;
    left: 0;
    top: 0;
    background: url("../images/star-matrix.gif") no-repeat 0 0;
    z-index: 2;  /*  要实现 遮盖之前背景图像 功能使用 z-index 使当前对应图像图层浮于原图层之上 */
}

ul.rating li.one a:hover{
    background-position: 0 -96px;
}
ul.rating li.two a:hover{
    background-position: 0 -112px;
}
ul.rating li.three a:hover{
    background-position: 0 -128px;
}
ul.rating li.four a:hover{
    background-position: 0 -144px;
}
ul.rating li.five a:hover{
    background-position: 0 -160px;
}

第五步：至此已完成五分好评的效果（第三步没用 z-index 属性 ，加粗部分），但是当鼠标滑过时发现只能选择一次得分，不能向后或向前，原因是 LI 中的所有 A 都被盖在最下层，所以在第三步用 z-index 属性 ，使 A 标签时刻处以最上层，才能响应 鼠标指针浮动在元素上出现相应的效果。