纯css制作滑动评分模块

超声波打磨机纯css制作滑动评分模块

这种功能模块一般出现在具有评分系统的网站如各种视频网，点评网等，实现方式有2种，js方式 and css方式，我们前端秉承最大限度优化页面运行速度的优良传统、能不用js的情况下绝对不用，在这里为大家介绍下通过纯css来实现这一滑动评分模块。

实现原理

我们就拿滑动星星进行评分为例对此功能进行说明。首先要说的是，这个功能模块的里面的星星是通过绝对定位来进行排列的，而不是一般的 inline-block排列或者浮动排列。

传统实现方式（JS方式）

就一般论来说我们星星的css代码是这样子的：

星星分为2种情况，一种是暗星星,一种是点亮的星星，js方式来实现的话就是鼠标经过这5个星星时，当前星星以及排在这个星星之前的所有星星变为点亮的星星，而剩下得则变为未暗星星。

纯CSS 实现方式

而本文介绍的纯 css实现方式的代码部分是这样子的：

在这个代码中，div父级元素我们预先给他设置了暗星星作为背景，并且设置 repeat-x，而 .star_resets 侧翻手机元素则为初始评分的初始值，即刚开始默认有多少颗星星，这里的 3em 代表初始有3颗星星。

而.star01 – .star05 则通过绝对定位方式排列开来，这5个星星是不设置背景的。

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

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

<!DOCTYPE HTML>

挤压爆破<head>

<!--

*{ 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_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(star.gif) 0 -32px repeat-x;}

-->

</style>

</head>

<body>

oel

<span class="s_star"><a href="javascript:;" class="st4"></a></span>钢管加工

</div>

</div>

</body>

</html>

img 素材star.gif:

本文发布于:2024-09-22 09:38:21，感谢您对本站的认可！

本文链接：https://www.17tex.com/tex/3/230521.html

上一篇：「你先个皮肤之后在用用photoshop制作空间大图模块」

下一篇：模块胎架在钢箱梁制作中的应用

标签：评分实现方式

留言与评论（共有 0 条评论）