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

纯 css 制作滑动评分模块 这种功能模块一般出现在具有评分系统的网站如各种视频网，点评网等，实现方式有2种， js 方式 and css 方式，我们前端秉承最大限度优化页面运行速度的优良传统、能不用 js 的情况下绝对不用，在这里为大家介绍下 通过 纯 css 来实现这一滑动评分模块。 实现原理 我们就拿滑动星星进行评分为例对此功能进行说明。首先要说的是，这个功能模块的里面的星星是通过绝对定位来进行排列的，而不是一般的 inline-block 排列 或者 浮动排列。 传统实现方式（JS 方式） 就一般论来说我们星星的 css 代码是这样子的： div span class=light_star/span span class=light_star/span span class=light_star/span span class=light_star/span span class=dark_star/span /div 星星分为2种情况，一种是 暗色星星,一种是点亮的星星，js 方式来实现的话 就是鼠标经过 这5个星星时，当前星星以及排在这个星星之前的所有星星变为 点亮的星星，而剩下得则变为未暗色星星。 纯 CSS 实现方式 而本文介绍的 纯 css 实现方式的代码部分是这样子的： div a href=javascript:; class=star01/a a href=javascript:; class=star02/a a href=javascript:; class=star03/a a href=javascript:; class=star04/a a href=javascript:; class=star05/a span class=star_resets style = width:3em;/span /div 在这个代码中，div 父级元素 我们预先给他设置了 暗色星星作为背景，并且设置 repeat-x ， 而 .star_resets 元素则为初始评分的初始值，即刚开始默认有多少颗星星，这里的 3em 代表初始有3颗星星。 而.star01 –.star05 则通过绝对定位方式排列开来，这5个星星是不设置背景的。 下面来说说如何实现 滑动星星： 纯CSS 滑动星星 纯 剖 析 图（红色方框代表元京的大小） . s t ar_reset s s t ar01［勹 . s t ar02 口 . st ar03 口 di v背旱展现悟况 ．忒 ar _reset s 背导匣现＇情况 starO1 位翌s t a r 02 位赞s t a r 03 位翌 . star04 st ar05 s t a r 04 位翌 口口 s t a r 05 位翌 : hov,er 时情况 （红色方框代表元要的大小） . star01 日 . st a r02 巳豆l 寸 「了1A 「了 1A芍 . star04 I . star05 I 当鼠标经过这5个星星的时候，星星就会改变 自身的宽度，并设置有背景，从而实现 鼠标经过星星，星星变亮的效果。 !DOCTYPE HTML html lang=en-US head meta charset=UTF-8 title滑动星星 demo/title 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; background:url(images/star.gif) 0 0 repeat-x;} .slide_stars_l .s_star{ float:left;} height:1em; .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