五星点评

之前做星点评时都是用backgroud-position来替换点亮的小星子：如用图

，现总结出一个新方法，直接用width控制点亮的星子个数，可将图片减为两张全灰和全亮(可以用css sprites)：

，

，

现有两种组织形式:

一种简单封装的函数:

程序：

			<div class="starbar">
			　　<p>评分星条：</p>
			　　<div class="starTool">
			　　　　<div class="starDom">
			　　	　　<span></span>
			　　　　</div>
			　　<div>
			</div>
			<style>
			.starTool{width: 100px;height:25px;background:url(../images/comment.png) no-repeat;background-size:100%;background-position: 0 -250px;cursor: pointer;}
			.starDom{width:0;overflow: hidden;}
			.starDom span{ display:block;width:100px;height:25px;background:url(../images/comment.png) no-repeat;background-size:100%;}
			</style>
			<script>
						$(function(){
							function starTool(event){
							var event = event || window.event;
							var Xwidth = (event.clientX - $(this).offset().left)/($(".starTool").width())*100;
							   
							   Xwidth = (Xwidth<20)? 20:((Xwidth<40)?40:((Xwidth<60)?60:(Xwidth<80)?80:(Xwidth<100)?100:100));
							   //20,40,60,80,100分别对应一颗星
								$starDom = $(".starbar").find(".starDom");

								$starDom.css({width:Xwidth+"%"});

						
							}
							$(".starbar").find(".starTool").bind("click",starTool);//调用
						});
			</script>

 

一种编写成插件形式:

代码:

<!--评分星条-->
					<div class="starPlus">
						<p>使用插件jquery.star.js</p>
						<script src="../js/jquery.star.js"></script>
						<div class="starBar">
						</div>
						<script>
						 $(".starBar").star();//方便利落
 						</script>
					</div>

 jquery.star.js

/*
*星点评
*
*/
;(function($){
	$.fn.star = function(){

		var htmlDom = "<div class='starTool'>"
				+"<div class='starDom'>"
				 +"<span></span>"
			        +"</div>"
			     +"</div>"; //html结构

	        var jqDom = $(htmlDom);//为html结构添加css

 		    jqDom.find(".starTool").css({width:"100px",height:"25px",background:"url(../images/comment.png) no-repeat 100%",backgroundPosition:"0 -250px",cursor:"pointer"});
 		    jqDom.find(".starDom").css({width:"0",overflow:"hidden"});
	            jqDom.find(".starDom span").css({display:"block",width:"100px",height:"25px",background:"url(../images/comment.png) no-repeat",backgroundSize:"100%"});
						
	     var starTool = function(event){
		    var event = event || window.event;
		    var Xwidth = (event.clientX - $(this).offset().left)/($(".starTool").width())*100;
						   
			Xwidth = (Xwidth<20)? 20:((Xwidth<40)?40:((Xwidth<60)?60:(Xwidth<80)?80:(Xwidth<100)?100:100));
						//20,40,60,80,100分别对应一颗星
		        $(this).find(".starDom").css({width:Xwidth+"%"});
			}


		$(this).append(jqDom);

		$(this).find(".starTool").bind("click",starTool);//绑定事件


		return this;  //支持链式
					
		};
	
})(jQuery);

 两种效果截图:

逻辑解说:

      包括3层，

　　第一层为:背景层，设置灰色星星背景图和设定长宽；

　　第二层为:控制层：主要控制其宽度来控制内容层显示的亮着的星星个数；

　　第三层为:内容层: 设置全亮星星的背景图；