五星点评

最新推荐文章于 2025-08-23 02:53:08 发布

weixin_30746117

最新推荐文章于 2025-08-23 02:53:08 发布

阅读量72

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hanbingljw/p/4267744.html

本文介绍了一种新的星点评交互方法，通过控制星星背景的宽度实现动态评分效果，提供了两种实现方式：简单封装函数和jQuery插件形式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前做星点评时都是用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);

两种效果截图: