jQuery满意度星级评价插件特效代码分享


Posted in Javascript onAugust 19, 2015

这是一款基于jQuery 的星级评分效果实例,鼠标滑过星星区域显示评论信息提交内容,适用在评论表单里面,是表单美化提交内容的一种用户体验设计。

 为大家分享的jQuery满意度星级评价插件特效代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>满意度jQuery星级评分插件</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/comment.js"></script>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif;}
/*quiz style*/
.quiz{border:solid 1px #ccc;height:270px;width:772px;}
.quiz h3{font-size:14px;line-height:35px;height:35px;border-bottom:solid 1px #e8e8e8;padding-left:20px;background:#f8f8f8;color:#666;position:relative;}
.quiz_content{padding-top:10px;padding-left:20px;position:relative;height:205px;}
.quiz_content .btm{border:none;width:100px;height:33px;background:url(images/btn.gif) no-repeat;margin:10px 0 0 64px;display:inline;cursor:pointer;}
.quiz_content li.full-comment{position:relative;z-index:99;height:41px;}
.quiz_content li.cate_l{height:24px;line-height:24px;padding-bottom:10px;}
.quiz_content li.cate_l dl dt{float:left;}
.quiz_content li.cate_l dl dd{float:left;padding-right:15px;}
.quiz_content li.cate_l dl dd label{cursor:pointer;}
.quiz_content .l_text{height:120px;position:relative;padding-left:18px;}
.quiz_content .l_text .m_flo{float:left;width:47px;}
.quiz_content .l_text .text{width:634px;height:109px;border:solid 1px #ccc;}
.quiz_content .l_text .tr{position:absolute;bottom:-18px;right:40px;}
/*goods-comm-stars style*/
.goods-comm{height:41px;position:relative;z-index:7;}
.goods-comm-stars{line-height:25px;padding-left:12px;height:41px;position:absolute;top:0px;left:0;width:400px;}
.goods-comm-stars .star_l{float:left;display:inline-block;margin-right:5px;display:inline;}
.goods-comm-stars .star_choose{float:left;display:inline-block;}
/* rater star */
.rater-star{position:relative;list-style:none;margin:0;padding:0;background-repeat:repeat-x;background-position:left top;float:left;}
.rater-star-item, .rater-star-item-current, .rater-star-item-hover{position:absolute;top:0;left:0;background-repeat:repeat-x;}
.rater-star-item{background-position: -100% -100%;}
.rater-star-item-hover{background-position:0 -48px;cursor:pointer;}
.rater-star-item-current{background-position:0 -48px;cursor:pointer;}
.rater-star-item-current.rater-star-happy{background-position:0 -25px;}
.rater-star-item-hover.rater-star-happy{background-position:0 -25px;}
.rater-star-item-current.rater-star-full{background-position:0 -72px;}
/* popinfo */
.popinfo{display:none;position:absolute;top:30px;background:url(images/comment/infobox-bg.gif) no-repeat;padding-top:8px;width:192px;margin-left:-14px;}
.popinfo .info-box{border:1px solid #f00;border-top:0;padding:0 5px;color:#F60;background:#FFF;}
.popinfo .info-box div{color:#333;}
.rater-click-tips{font:12px/25px;color:#333;margin-left:10px;background:url(images/comment/infobox-bg-l.gif) no-repeat 0 0;width:125px;height:34px;padding-left:16px;overflow:hidden;}
.rater-click-tips span{display:block;background:#FFF9DD url(images/comment/infobox-bg-l-r.gif) no-repeat 100% 0;height:34px;line-height:34px;padding-right:5px;}
.rater-star-item-tips{background:url(images/comment/star-tips.gif) no-repeat 0 0;height:41px;overflow:hidden;}
.cur.rater-star-item-tips{display:block;} 
.rater-star-result{color:#FF6600;font-weight:bold;padding-left:10px;float:left;}
</style>

<center><br>
<div class="quiz">
 <h3>我要评论</h3>
 <div class="quiz_content">
 <form action="" id="" method="post">
 <div class="goods-comm">
 <div class="goods-comm-stars">
 <span class="star_l">满意度:</span>
 <div id="rate-comm-1" class="rate-comm"></div>
 </div>
 </div>

 <div class="l_text">
 <label class="m_flo">内 容:</label>
 <textarea name="" id="" class="text"></textarea>
 <span class="tr">字数限制为5-200个</span>
 </div>
 <button class="btm" type="submit"></button>
 </form>
 </div><!--quiz_content end-->
</div><!--quiz end-->
</center>


</body>
</html>

运行效果图:

jQuery满意度星级评价插件特效代码分享

效果演示 源码下载 

以上就是为大家分享的jQuery满意度星级评价插件特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
easyui Draggable组件实现拖动效果
Aug 19 #Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 #Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 #Javascript
JS实现可调整倒计时间代码分享
Aug 18 #Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 #Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 #Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 #Javascript
You might like
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
优化php效率,提高php性能的一些方法
2011/03/24 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
php数组和链表的区别总结
2019/09/20 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
判断网页编码的方法python版
2016/08/12 Python
Python端口扫描简单程序
2016/11/10 Python
python3设计模式之简单工厂模式
2017/10/17 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
幼儿园教师考核制度
2014/02/01 职场文书
毕业自我鉴定书
2014/03/24 职场文书
初中语文教师研修日志
2015/11/13 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
MySQL常见优化方案汇总
2022/01/18 MySQL
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js