0

折腾:2颗星星+纯CSS实现星星评分交互效果

转自:http://www.zhangxinxu.com/wordpress/?p=3568

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

大家都喜欢听故事。
每篇文章也都是有故事的。
今天的故事是与星星相关的。
没错,讲的是星星点灯的故事——
才怪!

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

故事其实是这样的~~

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

很赞,对不对!

然,故事刚刚开始,

而后我随便吐槽了句:

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

一石激起三层浪:
微博回复截图

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

实际上,两颗星星(见下图)完全可以实现兼容IE6在内的效果;而且,纯CSS可是可以记住当前星星点击个数哦!
两颗星星

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

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

正片之前先来个精彩预告,您可以狠狠地点击这里:两颗星星实现的星星点击评分效果demo

哈哈,这回不上截图了,上截视频,更直观,截自Chrome浏览器,纯CSS实现。对了,貌似忘记把《爱情公寓》电视关掉,有杂音,嘻嘻……

 

iPad党若看不到上视频,可以点击下面区域查看截图:

 

您可能会惊讶地发现,诶,怎么点击的星星可以记住啊,纯CSS?鑫哥你确定不是在忽悠?

忽悠

我不姓赵哦~

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

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

两个星星实现原理见下图:
图1两颗星星实现兼容交互原理示意图1 张鑫旭-鑫空间-鑫生活    图2两颗星星实现兼容交互原理示意图2 张鑫旭-鑫空间-鑫生活

  1. 背景色就是灰色平铺;
  2. 5个小标签,分别对应每个星星,宽度1/5,其垂直层次关系见图1示意;
  3. 当鼠标经过某星星,例如上图所示第3个,宽度延伸,背景显示,hover效果即呈现;
  4. 最后,仔细观察其他小星星的层次以及位置,不存在覆盖的情况,于是,hover其他小星星,效果同样存在;
  5. over!

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

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

HTML结构如下:

<div class="star_bg">
    <a class="star star_1"></a>
    <a class="star star_2"></a>
    <a class="star star_3"></a>
    <a class="star star_4"></a>
    <a class="star star_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-x 0 -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事故讲完了,那如何记住星星点击的故事呢?

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

去年年初曾介绍过“CSS radio/checkbox单复选框元素显隐技术”,又称“checkbox hack技术”。

利用label for与单复选框等之间的点击关联特性,结果:checked伪类选择器以及兄弟选择器实现我们想要的交互效果——例如,元素的显示与隐藏,或者是选中的星星个数标记。

有些迷糊?不急,来个最简单示例,跟我一步一步来:

  1. 一个单选框,以及一个对应的label标签,如下:
    <input type="radio" id="testRadio"><label for="testRadio">观光团</label>
  2. 点击含“观光团”字样的label标签,只要不是奇葩设备,单选框都会被选中的(因为for值等于单选框id值);
  3. 于是,触发了如下伪类:
    input:checked {}
  4. CSS3中还有兄弟选择器,如~以及相邻兄弟选择器+,于是,我们可以改变label标签的状态,例如,文字变红:
    input:checked + label { color: red; }
  5. 如果我们把label做成星星背景,岂不是我们点击这个星星,触发radio选中,就可以让这个label标签一直显示星星背景?
    input:checked + label { background: url(star.png) repeat-x 0 -20px; }

以上就是实现的基本原理。

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

  • 因为要兼顾IE6浏览器(hover效果),因此,采用的是a标签内嵌label标签的形式。如果您不考虑IE6浏览器,墙裂推荐直接一个label标签。于是,就有类似下面的HTML结构(第一颗星星示意):
    <input type="radio" id="starScore1" class="score score_1" value="1" name="score">
    <a href="#starScore1" class="star star_1" title="差"><label for="starScore1">差</label></a>

    a标签负责hover效果,label标签负责点击效果。

  • 我们需要隐藏单选框,且为可用性隐藏。我是使用clip实现的:
    { position: absolute; clip: rect(0 0 0 0); }
  • 伪类与兄弟选择器控制星星在对应单选框选中中的状态,其实与hover的CSS类似:
    .score:checked + .star {
        background: url(star.png) repeat-x 0 -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的显示 张鑫旭-鑫空间-鑫生活例如,点击第三颗星星,自然星星三颗呈现。此时,鼠标hover第2颗星星,理应显示两颗星星,但由于下面三颗星星占道了,因此,实际上显示了是3颗星星,问题出现。

    问题其实不难解决。

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

    .star_bg:hover .star {  background-image: none; } /* 经过父级容器,星星背景图去除 */

    父级背景隐藏权重要小于经过星星显示权重,因此,我使用了!important(您也可以使用其他方法提高选择器权重),如下:

    .star:hover { background: url(star.png) repeat-x 0 -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; }
  • over again!

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

这里的纯CSS实现实际是CSS3技术的应用,因此,局限就是兼容性。IE9+浏览器以及移动端都能不错实现。至于IE6~IE8浏览器,则……

实际上,IE7,IE8等浏览器点击星星,单选框也是选中的。对于这些浏览器,我们可能需要额外一点JS以及部分CSS的配合,实现我们需要的效果。具体实现可参见demo源代码,低版本IE浏览器JS代码直接可见。非重点,不展示。

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

比方说,IE6~IE8加载老版本jQuery,IE9+加载新jQuery。或者这里的,IE6-8单独加载一个处理包,或者称为兼容包,类似软件兼容补丁一样的东西。

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

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

demo中,为了IE6的hover效果,labelinline水平。貌似label标签酱油,因此,交互是通过a标签+JS实现的。

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

从语义上将,实际上,星星评分就是个单选框。因此,实际开发制作的时候,建议保留单选框组,增强可访问性。因此,从这点上讲,本文所展示的CSS驱动星星评分交互的方法是很有价值的。

如果只想实现简单,5颗星星一排,共5排的背景图片是最好的选择。除了背景图大一点,其他其实都还好,可以说是一个更适合大众的实际的方法。注意,此方法也需要保留单选框组,否则仅仅一个表象实现,实则质量不高。

本文方法好处在于,纯CSS驱动,省了不少JS;同时图片背景比较小。但是,学习以及理解成本稍高,可能并不适用于所有同行,因此,标题前缀为“折腾”二字。还有,本文方法可能在一些低端的Android pad上有些问题,不过我表示对此不屑一顾。

故事到此结束,谢谢品鉴!

转自:http://www.zhangxinxu.com/wordpress/?p=3568

 

 

下面是我整理的例子直接复制就可以复制到html运行就可以

<!DOCTYPE>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<style>
/* 星星点灯照亮我的家门 */
.star_bg {
width: 120px; height: 20px;
background: url(‘http://www.zhangxinxu.com/study/201308/star.png’) repeat-x;
position: relative;
overflow: hidden;
}
.star {
height: 100%; width: 24px;
line-height: 6em;
position: absolute;
z-index: 3;
}
.star:hover {
left: 0;
background: url(‘http://www.zhangxinxu.com/study/201308/star.png’) repeat-x 0 -20px!important;
z-index: 2;
}
.star_1 { left: 0; }
.star_2 { left: 24px; }
.star_3 { left: 48px; }
.star_4 { left: 72px; }
.star_5 { left: 96px; }
.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; }

label {
display: block; _display:inline;
height: 100%; width: 100%;
cursor: pointer;
}

/* 幕后的英雄,单选按钮 */
.score {
position: absolute;
clip: rect(0 0 0 0);
}
.score:checked + .star {
left: 0;
background: url(‘http://www.zhangxinxu.com/study/201308/star.png’) repeat-x 0 -20px;
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; }

.star_bg:hover .star {
background-image: none;
}

/* for IE6-IE8 JS 交互 */
.star_checked {
left: 0;
background: url(star.png) repeat-x 0 -20px;
z-index: 1;
}
</style>
</head>

<body>
<div id=”starBg” class=”star_bg”>
<input type=”radio” id=”starScore1″ class=”score score_1″ value=”1″ name=”score”>
<a href=”#starScore1″ class=”star star_1″ title=”差”><label for=”starScore1″>差</label></a>
<input type=”radio” id=”starScore2″ class=”score score_2″ value=”2″ name=”score”>
<a href=”#starScore2″ class=”star star_2″ title=”较差”><label for=”starScore2″>较差</label></a>
<input type=”radio” id=”starScore3″ class=”score score_3″ value=”3″ name=”score”>
<a href=”#starScore3″ class=”star star_3″ title=”普通”><label for=”starScore3″>普通</label></a>
<input type=”radio” id=”starScore4″ class=”score score_4″ value=”4″ name=”score”>
<a href=”#starScore4″ class=”star star_4″ title=”较好”><label for=”starScore4″>较好</label></a>
<input type=”radio” id=”starScore5″ class=”score score_5″ value=”5″ name=”score”>
<a href=”#5″ class=”star star_5″ title=”好”><label for=”starScore5″>好</label></a>
</div>
</body>
</html>

 

Jquery实现例子,直接复制就可以

<!DOCTYPE HTML>
<html>
<head><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>jQuery实现五星级评分</title>
<style>
*{margin:0;padding:0;font-size:13px;}
ul,li{list-style:none;}
.star {position:relative;width:600px;height:24px; margin:20px auto 0;}
.star span {float:left;height:19px;line-height:19px;}
.star ul{margin:0 10px;}
.star li{float:left;width:24px;height:22px;text-indent:-9999px;background:url(‘http://keleyi.com/keleyi/phtml/jqtexiao/15/star.png’) no-repeat;cursor:pointer;}
.star li.on{background-position:0 -28px;}
.star p {background:url(‘icon.gif’) no-repeat;padding:10px 10px 0;position:absolute;top:20px;width:159px;height:60px;z-index:100;}
.star p em {color: #FF6600;display: block;font-style: normal;}
.star strong {color:#ff6600;padding-left:10px;}
.hidden{display:none;}
</style>
<script type=”text/javascript” src=”http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js”></script>
<!–<script type=”text/javascript” src=”http://keleyi.com/keleyi/phtml/jqtexiao/15/score.js”></script>–>
<script type=”text/javascript”>
/**
* JQ评分效果
* http://keleyi.com
*/
function Score(options) {
this.config = {
selector : ‘.star’, // 评分容器
renderCallback : null, // 渲染页面后回调
callback : null // 点击评分回调
};

this.cache = {
aMsg : [
“很不满意|差得太离谱,与卖家描述的严重不符,非常不满”,
“不满意|部分有破损,与卖家描述的不符,不满意”,
“一般|质量一般,没有卖家描述的那么好”,
“满意|质量不错,与卖家描述的基本一致,还是挺满意的”,
“非常满意|质量非常好,与卖家描述的完全一致,非常满意”
],
iStar : 0,
iScore : 0
};

this.init(options);
}

Score.prototype = {

constructor: Score,

init: function(options){
this.config = $.extend(this.config,options || {});
var self = this,
_config = self.config,
_cache = self.cache;

self._renderHTML();
},
_renderHTML: function(){
var self = this,
_config = self.config;
var html = ‘<span class=”desc”></span>’ +
‘<p class=”star-p hidden”></p>’;
$(_config.selector).each(function(index,item){
$(item).append(html);
$(item).wrap($(‘<div class=”parentCls” style=”position:relative”></div>’));
var parentCls = $(item).closest(‘.parentCls’);
self._bindEnv(parentCls);
_config.renderCallback && $.isFunction(_config.renderCallback) && _config.renderCallback();
});

},
_bindEnv: function(parentCls){
var self = this,
_config = self.config,
_cache = self.cache;

$(_config.selector + ‘ li’,parentCls).each(function(index,item){

// 鼠标移上
$(item).mouseover(function(e){
var offsetLeft = $(‘ul’,parentCls)[0].offsetLeft;
ismax(index + 1);

$(‘p’,parentCls).hasClass(‘hidden’) && $(‘p’,parentCls).removeClass(‘hidden’);
$(‘p’,parentCls).css({‘left’:index*$(this).width() + 12 + ‘px’});

var html = ‘<em>’ +
‘<b>’+index+'</b>分 ‘+_cache.aMsg[index].split(‘|’)[0]+” +
‘</em>’ + _cache.aMsg[index].split(‘|’)[1];
$(‘p’,parentCls).html(html);
});

// 鼠标移出
$(item).mouseout(function(){
ismax();
!$(‘p’,parentCls).hasClass(‘hidden’) && $(‘p’,parentCls).addClass(‘hidden’);
});

// 鼠标点击
$(item).click(function(e){
var index = $(_config.selector + ‘ li’,parentCls).index($(this));
_cache.iStar = index + 1;

!$(‘p’,parentCls).hasClass(‘hidden’) && $(‘p’,parentCls).addClass(‘hidden’);
var html = ‘<strong>’ +
index +
‘分</strong>’ +_cache.aMsg[index].split(‘|’)[1];

$(‘.desc’,parentCls).html(html);
_config.callback && $.isFunction(_config.callback) && _config.callback({starAmount:_cache.iStar});
});

});

function ismax(iArg) {
_cache.iScore = iArg || _cache.iStar;
var lis = $(_config.selector + ‘ li’,parentCls);

for(var i = 0; i < lis.length; i++) {
lis[i].className = i < _cache.iScore ? “on” : “”;
}
}
}
};
</script>
</head>

<body>
<div class=”star”>
<span>jQuery星评</span>
<ul>
<li><a href=”javascript:;”>1</a></li>
<li><a href=”javascript:;”>2</a></li>
<li><a href=”javascript:;”>3</a></li>
<li><a href=”javascript:;”>4</a></li>
<li><a href=”javascript:;”>5</a></li>
</ul>
</div>
<script type=”text/javascript”>
$(function(){
var score = new Score({
callback: function(cfg) {
console.log(cfg.starAmount);
}
});
});
</script>
</body>
</html>

 

转自:http://blog.etongwl.com/?p=441 

天边的星星