基于jQuery实现的美观星级评论打分组件代码

2019-11-20 11:22:29

字体：大中小

来源：转载

供稿：网友

本文实例讲述了基于jQuery实现的美观星级评论打分组件代码。分享给大家供大家参考，具体如下：

这款jquery星级评论打分组件，是通用打分组件，callBack打分后执行的回调，this.Index:获取当前选中值。

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/js/2015/jquery-rate-dfzj-codes/

具体代码如下：

<!DOCTYPE HTML><html> <head> <meta charset="utf-8"><title>jquery星级评论打分组件</title> <script src="jquery-1.6.2.min.js"></script><script> var pRate = function(box,callBack){ this.Index = null; var B = $("#"+box),  rate = B.children("i"),  w = rate.width(),  n = rate.length,  me = this; for(var i=0;i<n;i++){  rate.eq(i).css({   'width':w*(i+1),   'z-index':n-i  }); }  rate.hover(function(){  var S = B.children("i.select");  $(this).addClass("hover").siblings().removeClass("hover");  if($(this).index()>S.index()){   S.addClass("hover");  } },function(){  rate.removeClass("hover"); }) rate.click(function(){  rate.removeClass("select hover");  $(this).addClass("select");  me.Index = $(this).index() + 1;  if(callBack){callBack();} })}</script><style type="text/css"> h1{font:26px/3 'microsoft yahei','simhei';color:#000;text-indent:2em;text-shadow:1px 1px 2px #ccc} .p_rate{height:14px;position:relative;width:80px;overflow:hidden;display:inline-block;background:url(images/rate.png) repeat-x;margin:40px 100px}.p_rate i{position:absolute;top:0;left:0;cursor:pointer;height:14px;width:16px;background:url(images/rate.png) repeat-x 0 -500px}.p_rate .select{background-position:0 -32px}.p_rate .hover{background-position:0 -16px}</style></head> <body><h1>jquery星级评论打分组件</h1>  <span class="p_rate" id="p_rate"> <i title="1分"></i>  <i title="2分"></i>  <i title="3分"></i>  <i title="4分"></i>  <i title="5分"></i> </span><script> var Rate = new pRate("p_rate",function(){alert(Rate.Index+'分')});</script></body> </html>

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：jQuery密码强度检测插件passwordStrength用法实例分析

下一篇：jQuery实现的个性化返回底部与返回顶部特效代码