站长资源
全栈工程师站点

教你用最简单的方法实现星星评分效果

教你用最简单的方法实现星星评分效果 -1

星星评分效果大家在购物的时候经常会看到,网上也有不少实现方法但是大多都太复杂,对于新手朋友来说看起来云里雾里,今天就详细的教给大家一个最简单的实现思路。

首先写一段html结构:

<div>
<ul>
	<li title="一星差评"></li>
	<li title="二星差评"></li>
	<li title="三星差评"></li>
	<li title="四星中评"></li>
	<li title="五星中评"></li>
	<li title="六星中评"></li>
	<li title="七星好评"></li>
	<li title="八星好评"></li>
	<li title="九星好评"></li>
	<li title="十星满评"></li>
	<span></span>
</ul>
</div>

为了达到代码最简,我们这里就不用css写星星了,给每个li一个背景

css代码如下:

li {
	width: 24px;
	height: 19px;
	background: url(http://www.wangdahai.cn/web_view/00101/star_bg.png) no-repeat 0 0px;
	float: left;
	list-style: none;
}

背景图如下:

教你用最简单的方法实现星星评分效果 -2

我们来分析下JS代码的逻辑部分

首先点击之后我们需要给当前以及当前位置之前的所有li变为选中状态,并提示选择的是几星评价。

1、点击后当前变为选中

$(this).css('backgroundPosition','0 -28px');

2、点击后当前位置之前的所有li变为选中,我们用到preAll()函数

$(this).css('backgroundPosition','0 -28px').prevAll().css('backgroundPosition','0 -28px');

然后我们再次点击需要清理掉原先的选中状态,因此我们需要在每次点击时候重置li的背景

$('li').css('backgroundPosition','0 0');

最后我们要把title的值在span中显示出来

$('span').html($(this).attr('title'));

这样我们就完成了星星评分效果的实现

附完整代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>教你用最简单的方法实现星星评分效果</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style>
* {
	padding: 0;
	margin: 0;
}
li {
	width: 24px;
	height: 19px;
	background: url(http://www.wangdahai.cn/web_view/00101/star_bg.png) no-repeat 0 0px;
	float: left;
	list-style: none;
}
</style>
</head>
<body>
<div>
<ul>
	<li title="一星差评"></li>
	<li title="二星差评"></li>
	<li title="三星差评"></li>
	<li title="四星中评"></li>
	<li title="五星中评"></li>
	<li title="六星中评"></li>
	<li title="七星好评"></li>
	<li title="八星好评"></li>
	<li title="九星好评"></li>
	<li title="十星满评"></li>
	<span></span>
</ul>
</div>
<script>
$('li').click(function(){
	$('li').css('backgroundPosition','0 0');
	$(this).css('backgroundPosition','0 -28px').prevAll().css('backgroundPosition','0 -28px');
	$('span').html($(this).attr('title'));
});
</script>

</body>
</html>

相信看到这里,大家对星星评分效果已经能够轻松掌握

本文由站长资源原创首发,转载请注明出处


在线演示  
×

站长资源极速下载通道: 教你用最简单的方法实现星星评分效果

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 教你用最简单的方法实现星星评分效果

评论 抢沙发

评论前必须登录!