实用的jquery星星评分效果代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是实用的jquery星星评分效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>实用的jquery星星评分效果代码</title> 
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
p{margin:20px 0 10px 0;}
</style>

<script src="js/jquery-1.5.1.js" type="text/javascript"></script>
<script src="js/jquery.raty.js" type="text/javascript"></script>

</head>

<body>

<div style="width:400px;margin:50px auto;">
	<p style="font-size:20px">请给出你的评分(百分制)：</p>
	<div id="star1"></div>
	<div id="result1"></div>
	<p style="font-size:20px">请给出你的评分(十分制)：</p>
	<div id="star2"></div>
	<div id="result2"></div>
</div>

<script type="text/javascript">
rat('star1','result1',10);
rat('star2','result2',1);
function rat(star,result,m){

	star= '#' + star;
	result= '#' + result;
	$(result).hide();//将结果DIV隐藏

	$(star).raty({
		hints: ['10','20', '30', '40', '50','60', '70', '80', '90', '100'],
		path: "css/img",
		starOff: 'star-off-big.png',
		starOn: 'star-on-big.png',
		size: 24,
		start: 40,
		showHalf: true,
		target: result,
		targetKeep : true,//targetKeep 属性设置为true，用户的选择值才会被保持在目标DIV中，否则只是鼠标悬停时有值，而鼠标离开后这个值就会消失
		click: function (score, evt) {
			//第一种方式：直接取值
			alert('你的评分是'+score*m+'分');
		}
	});

	/*第二种方式可以设置一个隐蔽的HTML元素来保存用户的选择值，然后可以在脚本里面通过jQuery选中这个元素来处理该值。 弹出结果
	var text = $(result).text();
	$('img').click(function () {
		if ($(result).text() != text) {
			alert('你的评分是'+$(result).text()/m+'分');
			alert(result);
			return;
		}
	});*/
}
</script>
</body>
</html>

JS代码(jquery.raty.js):

/*! * jQuery Raty - A Star Rating Plugin - http://wbotelhos.com/raty * ------------------------------------------------------------------- * * jQuery Raty is a plugin that generates a customizable star rating. * * Licensed under The MIT License * * @version 2.4.5 * @since 2010.06.11 * @author Washington Botelho * @documentation wbotelhos.com/raty * @twitter twitter.com/wbotelhos * * Usage:* ------------------------------------------------------------------- * $('#star').raty();
	* * <div id="star"></div> * */
;
	(function($){
	var methods ={
	init:function(settings){
	return this.each(function(){
	var self= this,$this= $(self).empty();
	self.opt = $.extend(true,{
}
,$.fn.raty.defaults,settings);
	$this.data('settings',self.opt);
	self.opt.number = methods.between(self.opt.number,0,20);
	if (self.opt.path.substring(self.opt.path.length - 1,self.opt.path.length) != '/'){
	self.opt.path += '/';
}
if (typeof self.opt.score == 'function'){
	self.opt.score = self.opt.score.call(self);
}
if (self.opt.score){
	self.opt.score = methods.between(self.opt.score,0,self.opt.number);
}
for (var i = 1;
	i <= self.opt.number;
	i++){
	$('<img />',{
	src:self.opt.path + ((!self.opt.score || self.opt.score < i) ? self.opt.starOff:self.opt.starOn),alt:i,title:(i <= self.opt.hints.length && self.opt.hints[i - 1] !== null) ? self.opt.hints[i - 1]:i}
).appendTo(self);
	if (self.opt.space){
	$this.append((i < self.opt.number) ? '&#160;
	':'');
}
}
self.stars = $this.children('img:not(".raty-cancel")');
	self.score = $('<input />',{
	type:'hidden',name:self.opt.scoreName}
).appendTo(self);
	if (self.opt.score && self.opt.score > 0){
	self.score.val(self.opt.score);
	methods.roundStar.call(self,self.opt.score);
}
if (self.opt.iconRange){
	methods.fill.call(self,self.opt.score);
}
methods.setTarget.call(self,self.opt.score,self.opt.targetKeep);
	var space= self.opt.space ? 4:0,width= self.opt.width || (self.opt.number * self.opt.size + self.opt.number * space);
	if (self.opt.cancel){
	self.cancel = $('<img />',{
	src:self.opt.path + self.opt.cancelOff,alt:'x',title:self.opt.cancelHint,'class':'raty-cancel'}
);
	if (self.opt.cancelPlace == 'left'){
	$this.prepend('&#160;
	').prepend(self.cancel);
}
else{
	$this.append('&#160;
	').append(self.cancel);
}
width += (self.opt.size + space);
}
if (self.opt.readOnly){
	methods.fixHint.call(self);
	if (self.cancel){
	self.cancel.hide();
}
}
else{
	$this.css('cursor','pointer');
	methods.bindAction.call(self);
}
$this.css('width',width);
}
);
}
,between:function(value,min,max){
	return Math.min(Math.max(parseFloat(value),min),max);
}
,bindAction:function(){
	var self= this,$this= $(self);
	$this.mouseleave(function(){
	var score = self.score.val() || undefined;
	methods.initialize.call(self,score);
	methods.setTarget.call(self,score,self.opt.targetKeep);
	if (self.opt.mouseover){
	self.opt.mouseover.call(self,score);
}
}
);
	var action = self.opt.half ? 'mousemove':'mouseover';
	if (self.opt.cancel){
	self.cancel.mouseenter(function(){
	$(this).attr('src',self.opt.path + self.opt.cancelOn);
	self.stars.attr('src',self.opt.path + self.opt.starOff);
	methods.setTarget.call(self,null,true);
	if (self.opt.mouseover){
	self.opt.mouseover.call(self,null);
}
}
).mouseleave(function(){
	$(this).attr('src',self.opt.path + self.opt.cancelOff);
	if (self.opt.mouseover){
	self.opt.mouseover.call(self,self.score.val() || null);
}
}
).click(function(evt){
	self.score.removeAttr('value');
	if (self.opt.click){
	self.opt.click.call(self,null,evt);
}
}
);
}
self.stars.bind(action,function(evt){
	var value = parseInt(this.alt,10);
	if (self.opt.half){
	var position= parseFloat((evt.pageX - $(this).offset().left) / self.opt.size),diff= (position > .5) ? 1:.5;
	value = parseFloat(this.alt) - 1 + diff;
	methods.fill.call(self,value);
	if (self.opt.precision){
	value = value - diff + position;
}
methods.showHalf.call(self,value);
}
else{
	methods.fill.call(self,value);
}
$this.data('score',value);
	methods.setTarget.call(self,value,true);
	if (self.opt.mouseover){
	self.opt.mouseover.call(self,value,evt);
}
}
).click(function(evt){
	self.score.val((self.opt.half || self.opt.precision) ? $this.data('score'):this.alt);
	if (self.opt.click){
	self.opt.click.call(self,self.score.val(),evt);
}
}
);
}
,cancel:function(isClick){
	return $(this).each(function(){
	var self= this,$this= $(self);
	if ($this.data('readonly') === true){
	return this;
}
if (isClick){
	methods.click.call(self,null);
}
else{
	methods.score.call(self,null);
}
self.score.removeAttr('value');
}
);
}
,click:function(score){
	return $(this).each(function(){
	if ($(this).data('readonly') === true){
	return this;
}
methods.initialize.call(this,score);
	if (this.opt.click){
	this.opt.click.call(this,score);
}
else{
	methods.error.call(this,'you must add the "click:function(score,evt){
}
" callback.');
}
methods.setTarget.call(this,score,true);
}
);
}
,error:function(message){
	$(this).html(message);
	$.error(message);
}
,fill:function(score){
	var self= this,number= self.stars.length,count= 0,$star,star,icon;
	for (var i = 1;
	i <= number;
	i++){
	$star = self.stars.eq(i - 1);
	if (self.opt.iconRange && self.opt.iconRange.length > count){
	star = self.opt.iconRange[count];
	if (self.opt.single){
	icon = (i == score) ? (star.on || self.opt.starOn):(star.off || self.opt.starOff);
}
else{
	icon = (i <= score) ? (star.on || self.opt.starOn):(star.off || self.opt.starOff);
}
if (i <= star.range){
	$star.attr('src',self.opt.path + icon);
}
if (i == star.range){
	count++;
}
}
else{
	if (self.opt.single){
	icon = (i == score) ? self.opt.starOn:self.opt.starOff;
}
else{
	icon = (i <= score) ? self.opt.starOn:self.opt.starOff;
}
$star.attr('src',self.opt.path + icon);
}
}
}
,fixHint:function(){
	var $this= $(this),score= parseInt(this.score.val(),10),hint= this.opt.noRatedMsg;
	if (!isNaN(score) && score > 0){
	hint = (score <= this.opt.hints.length && this.opt.hints[score - 1] !== null) ? this.opt.hints[score - 1]:score;
}
$this.data('readonly',true).css('cursor','default').attr('title',hint);
	this.score.attr('readonly','readonly');
	this.stars.attr('title',hint);
}
,getScore:function(){
	var score= [],value;
	$(this).each(function(){
	value = this.score.val();
	score.push(value ? parseFloat(value):undefined);
}
);
	return (score.length > 1) ? score:score[0];
}
,readOnly:function(isReadOnly){
	return this.each(function(){
	var $this = $(this);
	if ($this.data('readonly') === isReadOnly){
	return this;
}
if (this.cancel){
	if (isReadOnly){
	this.cancel.hide();
}
else{
	this.cancel.show();
}
}
if (isReadOnly){
	$this.unbind();
	$this.children('img').unbind();
	methods.fixHint.call(this);
}
else{
	methods.bindAction.call(this);
	methods.unfixHint.call(this);
}
$this.data('readonly',isReadOnly);
}
);
}
,reload:function(){
	return methods.set.call(this,{
}
);
}
,roundStar:function(score){
	var diff = (score - Math.floor(score)).toFixed(2);
	if (diff > this.opt.round.down){
	var icon = this.opt.starOn;
	// Full up:[x.76 .. x.99]if (diff < this.opt.round.up && this.opt.halfShow){
	// Half:[x.26 .. x.75]icon = this.opt.starHalf;
}
else if (diff < this.opt.round.full){
	// Full down:[x.00 .. x.5]icon = this.opt.starOff;
}
this.stars.eq(Math.ceil(score) - 1).attr('src',this.opt.path + icon);
}
// Full down:[x.00 .. x.25]}
,score:function(){
	return arguments.length ? methods.setScore.apply(this,arguments):methods.getScore.call(this);
}
,set:function(settings){
	this.each(function(){
	var $this= $(this),actual= $this.data('settings'),clone= $this.clone().removeAttr('style').insertBefore($this);
	$this.remove();
	clone.raty($.extend(actual,settings));
}
);
	return $(this.selector);
}
,setScore:function(score){
	return $(this).each(function(){
	if ($(this).data('readonly') === true){
	return this;
}
methods.initialize.call(this,score);
	methods.setTarget.call(this,score,true);
}
);
}
,setTarget:function(value,isKeep){
	if (this.opt.target){
	var $target = $(this.opt.target);
	if ($target.length == 0){
	methods.error.call(this,'target selector invalid or missing!');
}
var score = value;
	if (!isKeep || score === undefined){
	score = this.opt.targetText;
}
else{
	if (this.opt.targetType == 'hint'){
	score = (score === null && this.opt.cancel)? this.opt.cancelHint:this.opt.hints[Math.ceil(score - 1)];
}
else{
	score = this.opt.precision? parseFloat(score).toFixed(1):parseInt(score,10);
}
}
if (this.opt.targetFormat.indexOf('{
	score}
') < 0){
	methods.error.call(this,'template "{
	score}
" missing!');
}
if (value !== null){
	score = this.opt.targetFormat.toString().replace('{
	score}
',score);
}
if ($target.is(':input')){
	$target.val(score);
}
else{
	$target.html(score);
}
}
}
,showHalf:function(score){
	var diff = (score - Math.floor(score)).toFixed(1);
	if (diff > 0 && diff < .6){
	this.stars.eq(Math.ceil(score) - 1).attr('src',this.opt.path + this.opt.starHalf);
}
}
,initialize:function(score){
	score = !score ? 0:methods.between(score,0,this.opt.number);
	methods.fill.call(this,score);
	if (score > 0){
	if (this.opt.halfShow){
	methods.roundStar.call(this,score);
}
this.score.val(score);
}
}
,unfixHint:function(){
	for (var i = 0;
	i < this.opt.number;
	i++){
	this.stars.eq(i).attr('title',(i < this.opt.hints.length && this.opt.hints[i] !== null) ? this.opt.hints[i]:i);
}
$(this).data('readonly',false).css('cursor','pointer').removeAttr('title');
	this.score.attr('readonly','readonly');
}
}
;
	$.fn.raty = function(method){
	if (methods[method]){
	return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
}
else if (typeof method === 'object' || !method){
	return methods.init.apply(this,arguments);
}
else{
	$.error('Method ' + method + ' does not exist!');
}
}
;
	$.fn.raty.defaults ={
	cancel:false,cancelHint:'cancel this rating!',cancelOff:'cancel-off.png',cancelOn:'cancel-on.png',cancelPlace:'left',click:undefined,half:false,halfShow:true,hints:['10','20','30','40','50','60','70','80','90','100' ],iconRange:undefined,mouseover:undefined,noRatedMsg:'not rated yet',number:10,path:'img/',precision:false,round:{
	down:.25,full:.6,up:.76}
,readOnly:false,score:undefined,scoreName:'score',single:false,size:16,space:true,starHalf:'star-half.png',starOff:'star-off.png',starOn:'star-on.png',target:undefined,targetFormat:'{
	score}
',targetKeep:false,targetText:'',targetType:'hint',width:undefined}
;
}
)(jQuery);

附件:下载该文件资源,减少时间成本(增值服务)