标签：
之前做星点评时都是用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层，
第一层为:背景层，设置灰色星星背景图和设定长宽；
第二层为:控制层：主要控制其宽度来控制内容层显示的亮着的星星个数；
第三层为:内容层: 设置全亮星星的背景图；
标签：
原文地址：http://www.cnblogs.com/hanbingljw/p/4267744.html
