基于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 相关文章推荐
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
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操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
详解python with 上下文管理器
2020/09/02 Python
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
单位委托书怎么写
2014/08/02 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
党员检讨书
2014/10/13 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
简历中自我评价范文
2015/03/11 职场文书
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL