Home > Web Front-end > HTML Tutorial > css 实现评分效果_html/css_WEB-ITnose

css 实现评分效果_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:27:55
Original
1602 people have browsed it

  css实现评分效果,其实是css sprit (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>
Copy after login

第二步:

由于五星评分需要五个不带边框的方块,很自然要想将五个方块统一起来使用 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>
Copy after login

第三步:

结构搭好后开始进行 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;<strong> z-index: 10;/* 与  hover  中的z-index 对比实现另一重要效果,见下边说明  初步设计时可不考虑*/</strong>}/*仅仅是将 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;}
Copy after login

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

思想是,在鼠标放在当前 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;}
Copy after login

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template