基于SVG实现的jQuery评级特效js代码

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

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

以下是基于SVG实现的jQuery评级特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>����SVGʵ�ֵ�jQuery������Ч</title>

<script src="js/jquery.min.js"></script>
<script src="js/jRate.min.js"></script>
<script type="text/javascript">
	$(function () {
		var that = this;
		$("#jRate").jRate({
			rating: 3,
			strokeColor: 'black',
			width: 80,
			height: 80,
			onChange: function(rating) {
				console.log("OnChange: Rating: "+rating);
			},
			onSet: function(rating) {
				console.log("OnSet: Rating: "+rating);
			}
		});
		
	});
</script>
</head>
<body>
<center>
	<h2>jRate Demo Page</h2>
	<div id="jRate"></div>
</center>
</body>
</html>

JS代码(jRate.min.js):

!function(t){
	t.fn.jRate=function(o){
	"use strict";
	function r(t){
	return"undefined"!=typeof t}
function e(){
	return r(b)?b.rating:void 0}
function n(t){
	if(!r(t)||t<b.min||t>b.max)throw t+" is not in range("+min+","+max+")";
	l(t)}
function i(t){
	var o,r='<svg width="'+b.width+'" height='+b.height+' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"',e=b.horizontal,n=z.attr("id"),i='<defs><linearGradient id="'+n+"_grad"+t+'" x1="0%" y1="0%" x2="'+(e?100:0)+'%" y2="'+(e?0:100)+'%"><stop offset="0%" stop-color='+b.backgroundColor+'/><stop offset="0%" stop-color='+b.backgroundColor+"/></linearGradient></defs>";
	switch(b.shape){
	case"STAR":o=r+'viewBox="0 12.705 512 486.59">'+i+'<polygon style="fill:url(#'+n+"_grad"+t+");
	stroke:"+b.strokeColor+';
	stroke-width:2px;
	" points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "/></svg>';
	break;
	case"CIRCLE":o=r+">"+i+'<circle cx="'+b.width/2+'" cy="'+b.height/2+'" r="'+b.width/2+'" fill="url(#'+n+"_grad"+t+')" style="stroke:'+b.strokeColor+';
	stroke-width:2px;
	"/></svg>';
	break;
	case"RECTANGLE":o=r+">"+i+'<rect width="'+b.width+'" height="'+b.height+'" fill="url(#'+n+"_grad"+t+')" style="stroke:'+b.strokeColor+';
	stroke-width:2px;
	"/></svg>';
	break;
	case"TRIANGLE":o=r+">"+i+'<polygon points="'+b.width/2+",0 0,"+b.height+" "+b.width+","+b.height+'" fill="url(#'+n+"_grad"+t+')" style="stroke:'+b.strokeColor+';
	stroke-width:2px;
	"/></svg>';
	break;
	case"RHOMBUS":o=r+">"+i+'<polygon points="'+b.width/2+",0 "+b.width+","+b.height/2+" "+b.width/2+","+b.height+" 0,"+b.height/2+'" fill="url(#'+n+"_grad"+t+')" style="stroke:'+b.strokeColor+';
	stroke-width:2px;
	"/></svg>';
	break;
	case"FOOD":o=r+'viewBox="0 0 50 50">'+i+'<path fill="url(#'+n+"_grad"+t+')" style="stroke:'+b.strokeColor+';
	"d="M45.694,21.194C45.694,9.764,36.43,0.5,25,0.5S4.306,9.764,4.306,21.194c0,8.621,5.272,16.005,12.764,19.115c-1.882,2.244-3.762,4.486-5.645,6.73c-0.429,0.5-0.458,1.602,0.243,2.145c0.7,0.551,1.757,0.252,2.139-0.289c1.878-2.592,3.753-5.189,5.63-7.783c1.774,0.494,3.633,0.777,5.561,0.777c1.85,0,3.64-0.266,5.349-0.723c1.617,2.563,3.238,5.121,4.862,7.684c0.34,0.555,1.365,0.91,2.088,0.414c0.728-0.492,0.759-1.58,0.368-2.096c-1.663-2.252-3.332-4.508-4.995-6.76C40.3,37.354,45.694,29.91,45.694,21.194z M25,37.824c-1.018,0-2.01-0.105-2.977-0.281c1.07-1.48,2.146-2.965,3.215-4.447c0.939,1.48,1.874,2.959,2.81,4.436C27.058,37.717,26.041,37.824,25,37.824z M30.155,37c-1.305-1.764-2.609-3.527-3.91-5.295c0.724-1,1.446-1.998,2.17-3c1.644,0.746,3.646,0,4.827-1.787c1.239-1.872,0.005,0,0.005,0.002c0.01-0.014,5.822-8.824,5.63-8.97c-0.186-0.15-3.804,4.771-6.387,8.081l-0.548-0.43c2.362-3.481,5.941-8.426,5.757-8.575c-0.189-0.146-3.959,4.655-6.652,7.878l-0.545-0.428c2.463-3.398,6.202-8.228,6.014-8.374c-0.188-0.15-4.115,4.528-6.917,7.67l-0.547-0.43c2.575-3.314,6.463-8.02,6.278-8.169c-0.191-0.15-5.808,6.021-7.319,7.651c-1.325,1.424-1.664,3.68-0.562,5.12c-0.703,0.84-1.41,1.678-2.113,2.518c-0.781-1.057-1.563-2.111-2.343-3.17c1.975-1.888,1.984-5.234-0.054-7.626c-2.14-2.565-6.331-5.22-8.51-3.818c-2.093,1.526-1.14,6.396,0.479,9.316c1.498,2.764,4.617,3.965,7.094,2.805c0.778,1.227,1.554,2.455,2.333,3.684c-1.492,1.783-2.984,3.561-4.478,5.342C13.197,34.826,8.38,28.574,8.38,21.191c0-9.183,7.444-16.631,16.632-16.631c9.188,0,16.625,7.447,16.625,16.631C41.63,28.576,36.816,34.828,30.155,37z"/></svg>';
	break;
	case"TWITTER":o=r+'viewBox="0 0 512 512">'+i+'<path fill="url(#'+n+"_grad"+t+')" style="stroke:'+b.strokeColor+';
	stroke-width:0.7px;
	"d="M512,97.209c-18.838,8.354-39.082,14.001-60.33,16.54c21.687-13,38.343-33.585,46.187-58.115c-20.299,12.039-42.778,20.78-66.705,25.49c-19.16-20.415-46.461-33.17-76.674-33.17c-58.011,0-105.043,47.029-105.043,105.039c0,8.233,0.929,16.25,2.72,23.939c-87.3-4.382-164.701-46.2-216.509-109.753c-9.042,15.514-14.223,33.558-14.223,52.809c0,36.444,18.544,68.596,46.73,87.433c-17.219-0.546-33.416-5.271-47.577-13.139c-0.01,0.438-0.01,0.878-0.01,1.321c0,50.894,36.209,93.348,84.261,103c-8.813,2.399-18.094,3.686-27.674,3.686c-6.769,0-13.349-0.66-19.764-1.887c13.368,41.73,52.16,72.104,98.126,72.949c-35.95,28.175-81.243,44.967-130.458,44.967c-8.479,0-16.84-0.497-25.058-1.471c46.486,29.806,101.701,47.197,161.021,47.197c193.211,0,298.868-160.062,298.868-298.872c0-4.554-0.103-9.084-0.305-13.59C480.11,136.773,497.918,118.273,512,97.209z"/></svg>';
	break;
	case"BULB":o=r+'viewBox="0 0 512 512">'+i+'<path fill="url(#'+n+"_grad"+t+')" style="stroke:'+b.strokeColor+';
	stroke-width:0.7px;
	"d="M384,192c0,64-64,127-64,192H192c0-63-64-128-64-192c0-70.688,57.313-128,128-128S384,121.313,384,192z M304,448h-96c-8.844,0-16,7.156-16,16s7.156,16,16,16h2.938c6.594,18.625,24.188,32,45.063,32s38.469-13.375,45.063-32H304c8.844,0,16-7.156,16-16S312.844,448,304,448z M304,400h-96c-8.844,0-16,7.156-16,16s7.156,16,16,16h96c8.844,0,16-7.156,16-16S312.844,400,304,400z M81.719,109.875l28.719,16.563c4.438-9.813,9.844-19,16.094-27.656L97.719,82.125L81.719,109.875z M272,33.625V0h-32v33.625C245.344,33.063,250.5,32,256,32S266.656,33.063,272,33.625z M190.438,46.438l-16.563-28.719l-27.75,16l16.656,28.813C171.438,56.281,180.625,50.875,190.438,46.438z M430.281,109.875l-16-27.75l-28.813,16.656c6.25,8.656,11.688,17.844,16.125,27.656L430.281,109.875z M365.844,33.719l-27.688-16l-16.563,28.719c9.781,4.438,19,9.844,27.625,16.063L365.844,33.719z M96,192c0-5.5,1.063-10.656,1.625-16H64v32h33.688C97.063,202.688,96,197.438,96,192z M414.375,176c0.563,5.344,1.625,10.5,1.625,16c0,5.438-1.063,10.688-1.688,16H448v-32H414.375z M388.094,286.719l26.188,15.125l16-27.719l-29.063-16.75C397.188,267.313,392.813,277.063,388.094,286.719z M81.719,274.125l16,27.719l25.969-14.969c-4.688-9.688-9.063-19.5-13.031-29.438L81.719,274.125z"/></svg>';
	break;
	default:throw Error("No such shape as "+b.shape)}
return o}
function a(){
	z.css("white-space","nowrap"),z.css("cursor","pointer"),z.css("fill",b.shape)}
function c(t,o){
	t.on("mousemove",u(o)).on("mouseenter",u(o)).on("click",p(o)).on("mouseover",u(o)).on("hover",u(o)).on("mouseleave",h).on("mouseout",h).on("JRate.change",v).on("JRate.set",k),b.touch&&t.on("touchstart",m(o)).on("touchmove",m(o)).on("touchend",w(o)).on("tap",w(o))}
function s(){
	for(var t=z.attr("id"),o=0;
	o<b.count;
	o++)q.eq(o).find("#"+t+"_grad"+(o+1)).find("stop").eq(0).attr({
	offset:"0%"}
),q.eq(o).find("#"+t+"_grad"+(o+1)).find("stop").eq(0).attr({
	"stop-color":b.backgroundColor}
),q.eq(o).find("#"+t+"_grad"+(o+1)).find("stop").eq(1).attr({
	offset:"0%"}
),q.eq(o).find("#"+t+"_grad"+(o+1)).find("stop").eq(1).attr({
	"stop-color":b.backgroundColor}
)}
function l(t){
	s();
	var o=(b.max-b.min)/b.count;
	t=(t-b.min)/o;
	var e=b.startColor,n=z.attr("id");
	if(b.reverse)for(var i=0;
	t>i;
	i++){
	var a=b.count-1-i;
	if(q.eq(a).find("#"+n+"_grad"+(a+1)).find("stop").eq(0).attr({
	offset:"100%"}
),q.eq(a).find("#"+n+"_grad"+(a+1)).find("stop").eq(0).attr({
	"stop-color":e}
),parseInt(t)!==t){
	var c=Math.ceil(b.count-t)-1;
	q.eq(c).find("#"+n+"_grad"+(c+1)).find("stop").eq(0).attr({
	offset:100-10*t%10*10+"%"}
),q.eq(c).find("#"+n+"_grad"+(c+1)).find("stop").eq(0).attr({
	"stop-color":b.backgroundColor}
),q.eq(c).find("#"+n+"_grad"+(c+1)).find("stop").eq(1).attr({
	offset:100-10*t%10*10+"%"}
),q.eq(c).find("#"+n+"_grad"+(c+1)).find("stop").eq(1).attr({
	"stop-color":e}
)}
r(y)&&(e=M(b.count-1,i))}
else for(var i=0;
	t>i;
	i++)q.eq(i).find("#"+n+"_grad"+(i+1)).find("stop").eq(0).attr({
	offset:"100%"}
),q.eq(i).find("#"+n+"_grad"+(i+1)).find("stop").eq(0).attr({
	"stop-color":e}
),10*t%10>0&&(q.eq(Math.ceil(t)-1).find("#"+n+"_grad"+(i+1)).find("stop").eq(0).attr({
	offset:10*t%10*10+"%"}
),q.eq(Math.ceil(t)-1).find("#"+n+"_grad"+(i+1)).find("stop").eq(0).attr({
	"stop-color":e}
)),r(y)&&(e=M(b.count,i))}
function f(t){
	var o,r;
	return o=document.createElement("canvas"),o.height=1,o.width=1,r=o.getContext("2d"),r.fillStyle=t,r.fillRect(0,0,1,1),r.getImageData(0,0,1,1).data}
function h(){
	b.readOnly||(l(b.rating),v(null,{
	rating:b.rating}
))}
function d(t,o,r,e){
	if(!b.readOnly){
	var n,i=q.eq(o-1);
	n=b.horizontal?(t.pageX-i.offset().left)/i.width():(t.pageY-i.offset().top)/i.height();
	var a=(b.max-b.min)/b.count;
	n=b.reverse?n:1-n;
	var c=((b.reverse?b.max-b.min-o+1:o)-n)*a;
	c=b.min+Number(c.toFixed(b.precision)),c<=b.max&&c>=b.min&&(l(c),e&&(b.rating=c),i.trigger(r,{
	rating:c}
))}
}
function g(t,o,r,e){
	if(!b.readOnly){
	var n=t.originalEvent.changedTouches;
	if(!(n.length>1)){
	var i,a=n[0],c=q.eq(o-1);
	i=b.horizontal?(a.pageX-c.offset().left)/c.width():(a.pageY-c.offset().top)/c.height();
	var s=(b.max-b.min)/b.count;
	i=b.reverse?i:1-i;
	var f=((b.reverse?b.max-b.min-o+1:o)-i)*s;
	f=b.min+Number(f.toFixed(b.precision)),f<=b.max&&f>=b.min&&(l(f),e&&(b.rating=f),c.trigger(r,{
	rating:f}
))}
}
}
function u(t){
	return function(o){
	d(o,t,"JRate.change")}
}
function p(t){
	return function(o){
	d(o,t,"JRate.set",!0)}
}
function m(t){
	return function(o){
	g(o,t,"JRate.touch")}
}
function w(t){
	return function(o){
	g(o,t,"JRate.tap",!0)}
}
function v(t,o){
	b.onChange&&"function"==typeof b.onChange&&b.onChange.apply(this,[o.rating])}
function k(t,o){
	b.onSet&&"function"==typeof b.onSet&&b.onSet.apply(this,[o.rating])}
function C(){
	var t,o,r,e;
	for(o=0;
	o<b.count;
	o++)z.append(i(o+1));
	for(q=z.find("svg"),o=0;
	o<b.count;
	o++)t=q.eq(o),c(t,o+1),b.horizontal?t.css("margin-right",b.shapeGap||"0px"):t.css({
	display:"block","margin-bottom":b.shapeGap||"0px"}
),b.widthGrowth&&(r="scaleX("+(1+b.widthGrowth*o)+")",t.css({
	transform:r,"-webkit-transform":r,"-moz-transform":r,"-ms-transform":r,"-o-transform":r}
)),b.heightGrowth&&(e="scaleY("+(1+b.heightGrowth*o)+")",t.css({
	transform:e,"-webkit-transform":e,"-moz-transform":e,"-ms-transform":e,"-o-transform":e}
));
	s(),l(b.rating),q.attr({
	width:b.width,height:b.height}
)}
var x,y,q,z=t(this),_={
	rating:0,shape:"STAR",count:5,width:"20",height:"20",widthGrowth:0,heightGrowth:0,backgroundColor:"white",startColor:"yellow",endColor:"green",strokeColor:"black",shapeGap:"0px",opacity:1,min:0,max:5,precision:1,horizontal:!0,reverse:!1,readOnly:!1,touch:!0,onChange:null,onSet:null}
,b=t.extend({
}
,_,o),M=function(t,o){
	for(var r=[],e=0;
	3>e;
	e++){
	var n=Math.round((x[e]-y[e])/t),i=x[e]+n*(o+1);
	r[e]=i/256?(x[e]-n*(o+1))%256:(x[e]+n*(o+1))%256}
return"rgba("+r[0]+","+r[1]+","+r[2]+","+b.opacity+")"}
;
	return b.startColor&&(x=f(b.startColor)),b.endColor&&(y=f(b.endColor)),a(),C(),t.extend({
}
,this,{
	getRating:e,setRating:n,setReadOnly:function(t){
	b.readOnly=t}
,isReadOnly:function(){
	return b.readOnly}
}
)}
}
(jQuery);

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