首页 > 代码库 > 五星点评
五星点评
之前做星点评时都是用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="http://www.mamicode.com/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层，
第一层为:背景层，设置灰色星星背景图和设定长宽；
第二层为:控制层：主要控制其宽度来控制内容层显示的亮着的星星个数；
第三层为:内容层: 设置全亮星星的背景图；
五星点评
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。