欢迎来到 jackNEss'窝窝
I like simple mind

纯css制作滑动评分模块

2011年11月06日

纯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个星星是不设置背景的。

下面来说说如何实现 滑动星星:

当鼠标经过这5个星星的时候,星星就会改变 自身的宽度,并设置有背景,从而实现 鼠标经过星星,星星变亮的效果。

演示地址: http://www.jackness.org/lab/slide_stars/demo.html

HTML and CSS 源码

<!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; 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(images/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_star a.st5{left:4em;}
.slide_stars_l .s_star a.st5:hover{ left:0;z-index:2; width:5em;}
.slide_stars_l .s_star.current{ position:absolute; left:0; top:0; z-index:1; height:1em; font-size:16px; background:url(images/star.gif) 0 -32px repeat-x;}
-->
</style>
</head>
<body>
<div class="outset">
	<!-- 关键部分 -->
	<div class="slide_stars_l">
		<span class="s_star"><a href="javascript:;" class="st1"></a></span>
		<span class="s_star"><a href="javascript:;" class="st2"></a></span>
		<span class="s_star"><a href="javascript:;" class="st3"></a></span>
		<span class="s_star"><a href="javascript:;" class="st4"></a></span>
		<span class="s_star"><a href="javascript:;" class="st5"></a></span> 
		<span class=" s_star current" style="width:2em;"></span>
	</div>	
	<!--//关键部分-->
</div>
</body>
</html>
分类HTML + CSS
阅读 3,798
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS