基于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 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
js文字滚动停顿效果代码
Jun 28 Javascript
jquery蒙版控件实现代码
Dec 08 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
js canvas实现擦除动画
Jul 16 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
详解ES6 Symbol 的用途
Oct 14 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事务回滚简单实现方法示例
2017/03/28 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
地震发生中逃生十大法则
2008/05/12 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
Python 不同对象比较大小示例探讨
2014/08/21 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
基于python 凸包问题的解决
2020/04/16 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
幼儿园教研活动方案
2014/01/19 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
结婚幸福感言
2015/08/01 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书