在平常的淘宝收到货物之后,可以给货物的服务态度,物流态度打分,这道题目就是要求采用css,div实现这样的效果。原题目如下:
通过 HTML 和 CSS 实现 Rating 效果,请写出 2.0 和 3.5 的实现代码,要求样式可以实现 0.0、0.5、1.0、…、5.0 的所有形态,并通过一句话描述其用法,我自己加入了一个效果,就是点击某颗星之后,移开鼠标,该分数依旧显示。
该题考查的知识点主要有以下几个:
1.对 z-Index属性的掌握,当采用绝对定位方式时,可以i将元素以叠加的方式放置在其他元素之上。在这个rating效果中,采用了不同的3个index值。
2.对行内元素如何定位的掌握。
3.元素宽度变化带来的动画效果。
4.使用js的事件控制元素的样式。
5.a标签的伪属性的理解和使用。
源码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<style>
* {
margin: 0px;
padding: 0px;
}
ul {
/*注意此处采用相对对位,这样里面的a标签才能相对ul进行绝对定位 */
position: relative;
width: 150px;
height: 29px;
list-style: none;
/*此处的unselected、png图片就是未选中时的黑色星星,让它在x轴方向上平铺*/
background: transparent url(../images/unselected.png) repeat-x;
}
li {
float: left;
}
.start {
/*因为a标签是行内元素,只有让它变为块内元素,设置高度才有效*/
display: block;
/*注意初始时都是30px宽*/
width: 30px;
height: 29px;
/*注意采用绝对定位,但是在类选择器中,设置left属性,不起 作用?*/
position: absolute;
top: 0px;
/*重点属性,将它的z-index设置得最大,这样这一层离我们最近。只有它最大,当鼠标移动到别的星星上时,才会触发该星星的hover事件,*/
z-index: 20;
}
.start:hover {
position: absolute;
top: 0px;
/*重点属性,当鼠标移动上去时,它显示的层应该位于它未选中时层的下面,此值一定要比上面的zindex值20小*/
z-index: 2;
background: transparent url(../images/s2.png) repeat-x;
}
#s_1 {
left: 0px;
}
#s_1:hover {
width: 30px;
left: 0px;
}
#s_2 {
left: 30px;
}
#s_2:hover {
/*注意此处的width变了,变成了60,并且它相对于ul的左顶点定位 left:0px,top :0px;,造成了两颗星变绿的假象*/
width: 60px;
left: 0px;
}
#s_3 {
left: 60px;
}
#s_3:hover {
/*注意此处的width变了,变成了90px,并且它相对于ul的左顶点定位。造成了三颗星变绿的假象*/
width: 90px;
left: 0px;
}
#s_4 {
left: 90px;
}
#s_4:hover {
width: 120px;
left: 0px;
}
#s_5 {
left: 120px;
}
#s_5:hover {
width: 150px;
left: 0px;
}
/*该类属性主要用于当点击了该颗星,并且离开时,id=‘selecteda’ li标签显示的样式,它的宽度是点击a标签时动态计算的,当鼠标悬浮到a标签时,它的宽度为0px*/
._selected {
background: transparent url(../images/s2.png) repeat-x ;
height: 29px;
display: inline-block;
z-index: 1;
}
</style>
</head>
<body>
<div>
<ul>
<li id="selecteda"></li>
<li>
<a id="s_1" class="start" ></a>
</li>
<li>
<a id="s_2" class="start" ></a>
</li>
<li>
<a id="s_3" class="start"></a>
</li>
<li>
<a id="s_4" class="start"></a>
</li>
<li>
<a id="s_5" class="start"></a>
</li>
</ul>
</div>
</body>
<script>
var as = document.getElementsByTagName('a');
var _selecteda = document.getElementById('selecteda');
for (key in as) {
as[key].href = "javascript:void(0)";
//为a标签的click注册事件,设置selecteda的宽度和当前选中的星星宽度一样宽
as[key].onclick = function() {
_selecteda.className = '_selected';
var index = this.id.split("_")[1];
var _width = 30;
_selecteda.style.width = _width * index + 'px';
};
as[key].onmouseover = function() {
//当鼠标悬浮时 ,将宽度置0
_selecteda.style.width ='0px';
};
}
</script>
</html>
<------用到的图片资源