js css 星级评分

Posted 南侠书生: Follow @tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js css 星级评分相关的知识，希望对你有一定的参考价值。

利用css 和 js 实现星级评分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>rating</title>
</head>
<style >
	*{margin:0;padding: 0}
	ul{width:500px; padding:100px;padding:0 auto;}
	li{
		width:16px;
		height: 16px;
		list-style: none;
		display: inline-block;
		background: url(\'http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_star.jpg\') no-repeat;
	}
</style>

<body>				
	<ul class="rating" id="rating">
		<li class="rating-item" title="很差"> </li>
		<li class="rating-item" title="差"></li>
		<li class="rating-item" title="一般"></li>
		<li class="rating-item" title="好"></li>
		<li class="rating-item" title="极好"></li>
	</ul>
</body>
</html>
<script type="text/javascript" src="https://files.cnblogs.com/files/tonnytong/___jquery-1.12.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		var ratingWrap = $("#rating")
			, ratingItem = $(".rating-item",ratingWrap)
			, num = 2;

		var lightOn = function(num){
			ratingItem.each(function(index){
				var $this = $(this);
				$this.css("background","url(\'http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_star.jpg\')");
				if((index +1) <= num)
				{
					$this.css("background","url(\'http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_on.jpg\')");
				}

			})
		}

		lightOn(num);


		$(".rating-item").on("mouseover",function(){
			var $this = $(this);
			lightOn($this.index()+1);

		}).on("click",function(){
			var $this = $(this);
			num = $this.index()+1;
		}).on("mouseout",function(){
			lightOn(num);
		})


	})
</script>

　　

 

效果如下：

 

以上是关于js css 星级评分的主要内容，如果未能解决你的问题，请参考以下文章

如何使用带有 Django 模板标签的 amp CSS 星级评分？

js实现星级评分效果（最短代码）

原生js实现星级评分

css facetwp不显示和悬停星级评分

js实现星级评分之方法一

如何通过淘汰赛实现 CSS 星级评分