折腾2颗星星 纯CSS实现星星评分交互效果张鑫旭.docx

折腾2颗星星 纯CSS实现星星评分交互效果张鑫旭.docx

《折腾2颗星星 纯CSS实现星星评分交互效果张鑫旭.docx》由会员分享，可在线阅读，更多相关《折腾2颗星星 纯CSS实现星星评分交互效果张鑫旭.docx（7页珍藏版）》请在冰豆网上搜索。

折腾2颗星星纯CSS实现星星评分交互效果张鑫旭

折腾：

2颗星星+纯CSS实现星星评分交互效果张鑫旭

byzhangxinxufrom本文地址：

一、星星点灯，照亮我的家门

大家都喜欢听故事。

每篇文章也都是有故事的。

今天的故事是与星星相关的。

没错，讲的是星星点灯的故事——才怪！

标题只是我脑子突然蹦出来的，唉，这首老到掉渣子的歌我居然条件反射般想起，可见——我老了！

故事其实是这样的~~

在天气还未如此炎热的某天，@waylybaye微博上展示了其使用canvas绘制星星图片，然后再保存为png格式使用的折腾：

很赞，对不对！

然，故事刚刚开始，

而后我随便吐槽了句：

这种效果两个星星就可以完全CSS实现了，包括IE6浏览器，多少多余劳动力浪费了啊~~

一石激起三层浪：

有人对两颗星星实现星星评分效果感兴趣；有人觉得纯CSS搞不定记住之前用户所选星星。

实际上，两颗星星（见下图）完全可以实现兼容IE6在内的效果；而且，纯CSS可是可以记住当前星星点击个数哦！

哈哈，我们的故事就此展开……

二、小星星，亮晶晶，点点像你的眼睛

正片之前先来个精彩预告，您可以狠狠地点击这里：

两颗星星实现的星星点击评分效果demo

哈哈，这回不上截图了，上截视频，更直观，截自Chrome浏览器，纯CSS实现。

对了，貌似忘记把《爱情公寓》电视关掉，有杂音，嘻嘻……iPad党若看不到上视频，可以点击下面区域查看截图：

出现吧，图片君！

您可能会惊讶地发现，诶，怎么点击的星星可以记住啊，纯CSS？

鑫哥你确定不是在忽悠？

我不姓赵哦~

慢慢来，先看看两个星星如何实现兼容IE6浏览器的hover交互效果。

三、一闪一闪亮晶晶满天都是小星星

两个星星实现原理见下图:

图1图2背景色就是灰色平铺；

5个小标签，分别对应每个星星，宽度1/5，其垂直层次关系见图1示意;

当鼠标经过某星星，例如上图所示第3个，宽度延伸，背景显示，hover效果即呈现；

最后，仔细观察其他小星星的层次以及位置，不存在覆盖的情况，于是，hover其他小星星，效果同样存在；

over!

以上就是使用两个星星+纯CSS实现hover效果的原理。

5个小星星使用a标签，则可兼容IE6浏览器。

HTML结构如下：

<divclass="star_bg">

<aclass="starstar_1"></a>

<aclass="starstar_2"></a>

<aclass="starstar_3"></a>

<aclass="starstar_4"></a>

<aclass="starstar_5"></a>

</div>CSS示意如下：

/*灰色背景星星5个平铺*/

.star_bg{

width:

120px;height:

20px;

background:

url（star.png）repeat-x;

position:

relative;

overflow:

hidden;

}

/*这是5个小星星们的默认状态的定位*/

.star{

height:

100%;width:

24px;

line-height:

6em;

position:

absolute;

z-index:

3;

}

.star_1{left:

0;}

.star_2{left:

24px;}

.star_3{left:

48px;}

.star_4{left:

72px;}

.star_5{left:

96px;}

/*鼠标hover效果实现，分别显示背景与定宽*/

.star:

hover{

background:

url（star.png）repeat-x0-20px;

left:

0;z-index:

2;

}

.star_1:

hover{width:

24px;}

.star_2:

hover{width:

48px;}

.star_3:

hover{width:

72px;}

.star_4:

hover{width:

96px;}

.star_5:

hover{width:

120px;}两颗星星hover事故讲完了，那如何记住星星点击的故事呢？

四、城市里小星星稀疏的亮晶晶

去年年初曾介绍过“CSSradio/checkbox单复选框元素显隐技术”，又称“checkboxhack技术”。

利用labelfor与单复选框等之间的点击关联特性，结果:

checked伪类选择器以及兄弟选择器实现我们想要的交互效果——例如，元素的显示与隐藏，或者是选中的星星个数标记。

有些迷糊？

不急，来个最简单示例，跟我一步一步来：

一个单选框，以及一个对应的label标签，如下：

<inputtype="radio"id="testRadio"><labelfor="testRadio">观光团</label>点击含“观光团”字样的label标签，只要不是奇葩设备，单选框都会被选中的（因为for值等于单选框id值）；

于是，触发了如下伪类：

input:

checked{}CSS3中还有兄弟选择器，如~以及相邻兄弟选择器+，于是，我们可以改变label标签的状态，例如，文字变红：

input:

checked+label{color:

red;}如果我们把label做成星星背景，岂不是我们点击这个星星，触发radio选中，就可以让这个label标签一直显示星星背景？

input:

checked+label{background:

url（star.png）repeat-x0-20px;}以上就是实现的基本原理。

OK，下面来看看demo页面是如何处理的。

因为要兼顾IE6浏览器（hover效果），因此，采用的是a标签内嵌label标签的形式。

如果您不考虑IE6浏览器，墙裂推荐直接一个label标签。

于是，就有类似下面的HTML结构（第一颗星星示意）：

<inputtype="radio"id="starScore1"class="scorescore_1"value="1"name="score">

<ahref="#starScore1"class="starstar_1"title="差"><labelfor="starScore1">差</label></a>a标签负责hover效果，label标签负责点击效果。

我们需要隐藏单选框，且为可用性隐藏。

我是使用clip实现的：

{position:

absolute;clip:

rect（0000）;}伪类与兄弟选择器控制星星在对应单选框选中中的状态，其实与hover的CSS类似：

.score:

checked+.star{

background:

url（star.png）repeat-x0-20px;

left:

0;z-index:

1;

}

.score_1:

checked~.star_1{width:

24px;}

.score_2:

checked~.star_2{width:

48px;}

.score_3:

checked~.star_3{width:

72px;}

.score_4:

checked~.star_4{width:

96px;}

.score_5:

checked~.star_5{width:

120px;}于是，我们就实现了点击记住星星个数的效果了！

但，直接这样是有问题的，见下图示意：

例如，点击第三颗星星，自然星星三颗呈现。

此时，鼠标hover第2颗星星，理应显示两颗星星，但由于下面三颗星星占道了，因此，实际上显示了是3颗星星，问题出现。

问题其实不难解决。

我们只要让鼠标hover星星容器时候，所有背景都没有；经过星星时候，背景出现就可以了。

.star_bg:

hover.star{background-image:

none;}/*经过父级容器，星星背景图去除*/父级背景隐藏权重要小于经过星星显示权重，因此，我使用了!

important（您也可以使用其他方法提高选择器权重），如下：

.star:

hover{background:

url（star.png）repeat-x0-20px!

important;}于是，星星背景固定影响hover问题理论上解决了。

//zxx:

IE6上面两段CSS都不认识，因此，hover状态需要借助JS解决，具体参见demo源代码。

最后一个技术点，z-index设置。

根据上面的分析，星星总共有3种权重状态，因此，相应的，也存在3种层级状态：

1.默认状态的星星层级最高，以便随时实现hover效果，demo中其z-index值为3;

2.正在被hover的星星需要比点击固定显示星星层级高。

众所周知，如果z-index值相同，后面的绝对定位元素会覆盖前面的。

这种情况下，如果第3颗点击选中，鼠标经过第2颗星星，就会出现hover死循环——星星2被星星3覆盖→星星2进入非hover状态（较高层级，覆盖星星3）→触发星星2hover态（被星星3覆盖）→星星2进入非hover状态）→触发星星2hover态→……

因此，需要设置，hover状态z-index:

2;选中态z-index:

1.完整示意如下：

.star{z-index:

3;}

.star:

hover{z-index:

2;}

:

checked+.star{z-index:

1;}overagain!

五、看那星星多么美丽，摘下一颗有局限性

这里的纯CSS实现实际是CSS3技术的应用，因此，局限就是兼容性。

IE9+浏览器以及移动端都能不错实现。

至于IE6~IE8浏览器，则……

实际上，IE7,IE8等浏览器点击星星，单选框也是选中的。

对于这些浏览器，我们可能需要额外一点JS以及部分CSS的配合，实现我们需要的效果。

具体实现可参见demo源代码，低版本IE浏览器JS代码直接可见。

非重点，不展示。

现在的我越来越有一种感觉，或者说需求，是不是网站可以根据浏览器自动加载不同的JS文件呢？

比方说，IE6~IE8加载老版本jQuery，IE9+加载新jQuery。

或者这里的，IE6-8单独加载一个处理包，或者称为兼容包，类似软件兼容补丁一样的东西。

a与label嵌套之特性a标签里面嵌套label标签，点击后会有何反应呢？

据测试，如果labelblock水平，同时for关联控件元素，a标签打酱油；否则，会触发a标签的相关行为。

demo中，为了IE6的hover效果，label是inline水平。

貌似label标签酱油，因此，交互是通过a标签+JS实现的。

六、就向流星许个心愿，让你知道这里是结语

从语义上将，实际上，星星评分就是个单选框。

因此，实际开发制作的时候，建议保留单选框组，增强可访问性。

因此，从这点上讲，本文所展示的CSS驱动星星评分交互的方法是很有价值的。

如果只想实现简单，5颗星星一排，共5排的背景图片是最好的选择。

除了背景图大一点，其他其实都还好，可以说是一个更适合大众的实际的方法。

注意，此方法也需要保留单选框组，否则仅仅一个表象实现，实则质量不高。

本文方法好处在于，纯CSS驱动，省了不少JS；同时图片背景比较小。

但是，学习以及理解成本稍高，可能并不适用于所有同行，因此，标题前缀为“折腾”二字。

还有，本文方法可能在一些低端的Androidpad上有些问题，不过我表示对此不屑一顾。

故事到此结束，谢谢品鉴！

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[]本文地址：

（本篇完）

如果您觉得本文的内容对您的学习有所帮助：

相关文章CSS3box-shadow兼容loading效果兼IE10+CSSHack介绍（0.498）CSSradio/checkbox单复选框元素显隐技术（0.428）翻译-逐渐消失的Flash网站（0.094）Appleiphone4官网图片“视网膜”放大效果实现（0.094）jQuery-很酷的弹出层效果js插件（0.084）js+flash（as3）实现复制文字内容到剪切板（0.084）翻译：

关于表单每个设计师都必须知道的10件事（0.084）基于HTML模板和JSON数据的JavaScript交互（0.084）有意思：

textarearesize属性下纯CSS交互效果（0.084）梳理：

提高前端性能方面的处理以及不足（0.084）使用纯洁的CSS实现HTML5的新logo（RANDOM-0.010）

分享到：

4

标签：

:

checked,css3,CSS伪类,交互,兄弟选择器,单选框,星星评分

这篇文章发布于2013年08月7日，星期三，12:

15，归类于css相关。

阅读9855次,今日23次