纯css制作滑动评分模块.docVIP

纯css制作滑动评分模块 这种功能模块一般出现在具有评分系统的网站如各种视频网，点评网等，实现方式有2种，js方式 and css方式，我们前端秉承最大限度优化页面运行速度的优良传统、能不用js的情况下绝对不用，在这里为大家介绍下 通过 纯css来实现这一滑动评分模块。 实现原理 我们就拿滑动星星进行评分为例对此功能进行说明。首先要说的是，这个功能模块的里面的星星是通过绝对定位来进行排列的，而不是一般的 inline-block排列 或者 浮动排列。 传统实现方式（JS方式） 就一般论来说我们星星的css代码是这样子的： span class light_star span class light_star span class light_star span class light_star span class dark_star 星星分为2种情况，一种是 暗色星星,一种是点亮的星星，js方式来实现的话 就是鼠标经过这5个星星时，当前星星以及排在这个星星之前的所有星星变为 点亮的星星，而剩下得则变为未暗色星星。 纯CSS 实现方式 而本文介绍的 纯 css实现方式的代码部分是这样子的： a href javascript:; class star01 a href javascript:; class star02 a href javascript:; class star03 a href javascript:; class star04 a href javascript:; class star05 span class star_resets style width:3em; 在这个代码中，div父级元素 我们预先给他设置了 暗色星星作为背景，并且设置 repeat-x，而 .star_resets 元素则为初始评分的初始值，即刚开始默认有多少颗星星，这里的 3em 代表初始有3颗星星。 而.star01 – .star05 则通过绝对定位方式排列开来，这5个星星是不设置背景的。下面来说说如何实现 滑动星星：当鼠标经过这5个星星的时候，星星就会改变 自身的宽度，并设置有背景，从而实现 鼠标经过星星，星星变亮的效果。 !DOCTYPE HTML html lang en-US meta charset UTF-8 滑动星星 demo style type text/css !-- * margin:0; padding:0; .outset margin:50px; text-align:center; /*-- slide star --*/ .slide_stars_l position:relative; display:inline-block; *display:inline; *zoom:1; font-size:16px;vertical-align:middle;width:5em; height:1em; background:url images/star.gif 0 0 repeat-x; .slide_stars_l .s_star float:left; .slide_stars_l .s_star a position:absolute; z-index:30; display:block; width:1em; height:1em; font-size:16px; outline:none; text-indent:-999em; .slide_stars_l .s_star a:hover background:url star.gif 0 -16px repeat-x; .slide_stars_l .s_star a.st1 left:0; .slide_stars_l .s_star a.st1:hover z-index:2; .slide_stars_l .s_star a.st2 left:1em; .slide_stars_l .s_star a.st2:hover left:0;z-index:2; width:2em; .slide_stars_l .s_star a.st3 left:2em; .slide_stars_l .s_star a.st3:hover left:0;z-index:2; width:3em; .slide_stars_l .s_star a.st4 left:3em; .slide_stars_l .s_star a.st4:hover left:0;z-index:2; width:4em; .slide_stars_l .s_