折腾：2颗星星-纯css实现星星评分交互效果--张鑫旭.pdfVIP

折腾：2 颗星星+纯 CSS 实现星星评分交互效果 张鑫旭 by zhangxinxu from 本文地址： /wordpress/?p=3568 一、星星点灯，照亮我的家门 大家都喜欢听故事。每篇文章也都是有故事的。今天的故事 是与星星相关的。没错，讲的是星星点灯的故事——才怪！ 标题只是我脑子突然蹦出来的，唉，这首老到掉渣子的歌我 居然条件反射般想起，可见——我老了！ 故事其实是这样 ~~ 在天气还未如此炎热的某天，@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 结构如下：lt;div class=star_bggt; lt;a class=star star_1gt;lt;/agt; lt;a class=star star_2gt;lt;/agt; lt;a class=star star_3gt;lt;/agt; lt;a class=star star_4gt;lt;/agt; lt;a class=star star_5gt;lt;/agt; lt;/divgt;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-x 0 -20px; left: 0; z-index: 2; } .star_1:hover { width: 24px; } .star_2:hover { width: 4