jquery插件star-rating.js实现星级评分特效


Posted in Javascript onApril 15, 2015

特效介绍

jquery星级评分插件star-rating.js下载插件,点击星星或者心的左边,就是半分,右边就是1分。点击减号,分数置为0。不兼容IE8以下的浏览器。

演示图

jquery插件star-rating.js实现星级评分特效

使用方法

第一步、引入下面的代码:

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

<link href="css/star-rating.css" media="all" rel="stylesheet" type="text/css"/>

<script src="js/star-rating.js" type="text/javascript"></script>

第二步、想要使用什么效果,就引入相应的input框:

<input id="input-2b" type="number" class="rating" min="0" max="5" step="0.5" data-size="xl"

   data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}">

第三步,如果需要重置或者提交按钮,可以引入下面的代码:

<button type="submit" class="btn btn-primary">Submit</button>

<button type="reset" class="btn btn-default">Reset</button>

第四步、引入js调用代码:

<script>

   jQuery(document).ready(function () {

       $(".rating-kv").rating();

   });

</script>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
详解基于vue-cli优化的webpack配置
Nov 06 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
四十九个javascript小知识实用技巧
Nov 20 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 #Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 #Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 #Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 #Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 #Javascript
JavaScript中window.open用法实例详解
Apr 15 #Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 #Javascript
You might like
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
js 小数取整的函数
2010/05/10 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
2013英文求职信模板范文
2013/11/15 职场文书
幼教个人求职信范文
2013/12/02 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
情人节活动总结范文
2015/02/05 职场文书
python基础之类方法和静态方法
2021/10/24 Python