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


Posted in Javascript onOctober 30, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
javascript闭包的理解
Apr 01 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 #Javascript
自己动手写的javascript前端等待控件
Oct 30 #Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 #Javascript
JavaScript获取function所有参数名的方法
Oct 30 #Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 #Javascript
jQuery实现切换页面过渡动画效果
Oct 29 #Javascript
js实现跨域的4种实用方法原理分析
Oct 29 #Javascript
You might like
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
php缓冲输出实例分析
2015/01/05 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
angularjs基础教程
2014/12/25 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
vue引用外部JS的两种种方法
2020/01/28 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
python爬虫 requests-html的使用
2020/11/30 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
大一学生假期实习的自我评价
2013/10/12 职场文书
经贸日语毕业生自荐信
2013/11/03 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
求职信内容怎么写
2014/05/26 职场文书
重阳节慰问信
2015/02/15 职场文书
初中班干部工作总结
2015/08/10 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
辞职信怎么写?
2019/05/21 职场文书
Go语言应该什么情况使用指针
2021/07/25 Golang