前端学习星星评分的设计。

第一个比较简单，用到了简单的css和js,利用图片的位置上下移动，来实现星星评分。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>星际评分一</title>
		<style>
			body,ul,li{
				padding: 0;
				margin: 0;
			}
			li{
				list-style-type:none;
				/*无标题*/
			
			}
			.rating{
				width:130px ;
				height: 26px;
				margin: 100px auto;
			}
			.rating-item{
				float: left;
				width: 26px;
				height: 26px;
				background:url(../img/te.png) no-repeat;
				cursor: pointer;/*手*/
				
			}
		</style>
	</head>
	<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>
		
<script src="../js/jquery-2.1.1.min.js"></script>
	<script>
	//团队开发，便于维护，避免命名空间重复，造成的是事件覆盖，可以统一用lzk_num;
	//或者加入自运行函数。
		var num = 2,
		$rating =$('#rating'),
		$item = $rating.find('.rating-item');
		//点亮
		var lightOn =function(num) {
			$item.each(function(index){
			if(index < num)
			   {
				 $(this).css('background-position','0 -26px');
			   }else{
				 $(this).css('background-position','0 0');
			   }
			
		    });
		};
		
          //初始化
          lightOn(num);
          
          //事件绑定,鼠标划过时，离开时。
          $item.on('mouseover',function(){
          	lightOn($(this).index() + 1);
          }).on('click',function(){
          	num = $(this).index() + 1;
          });
          $rating.on('mouseout',function(){
          	lightOn(num);
          });
</script>
	</body>
</html>

效果如图。但是要考虑全局变量，代码复用，封装调用。问题。

前端学习 星星评分的设计。

猜你喜欢

前端学习星星评分的设计。