Html
    Css
    Js

    
                        
.star {
	width:500px;
	border:1px solid #ccc;
	padding:20px;
	margin:50px auto;
}
.star .s-txt {
	float:left;
}
.star .s-xxs {
	display:inline-block;
}
.star .s-xx {
	float:left;
	color:#e3e3e3;
	padding-right:4px;
	cursor:pointer;
}
.star .s-haoping {
	color:#f13a3a;
	border:1px solid #f13a3a;
	padding:2px 4px;
	font-size:12px;
	vertical-align:super;
	position:relative;
	display:none;
}
.star .s-haoping .s-hp-triangle0 {
	border-width:4px;
	position:absolute;
	top:5px;
	left:-8px;
	border-color:transparent #f13a3a transparent transparent;
	border-style:dashed solid dashed dashed;
}
.star .s-haoping .s-hp-triangle1 {
	border-width:4px;
	position:absolute;
	top:5px;
	left:-7px;
	border-color:transparent  #f8f8f8 transparent transparent;
	border-style:dashed solid dashed dashed;
}
.star .color-f13a3a {
	color:#f13a3a;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.1
 立即下载

五星评论功能

这是使用iconfont+jquery实现的一个简单的星星评分功能。星星评分功能分两点:一点是当鼠标悬停和鼠标移出的效果为显示分数以及对应的分值描述;另外一点是当鼠标点击的时候确定分数以及对应的分值描述。本来星星是用iconfont来做的,但是好像不能上传文件,就只能用输入法输入的☆☆了。

0