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 相关文章推荐
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
php获取文件大小的方法
2014/02/26 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
php四种定界符详解
2017/02/16 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
python跨文件使用全局变量的实现
2020/11/17 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
美国鲜花递送:UrbanStems
2021/01/04 全球购物
铭立家具面试题
2012/12/06 面试题
Java基础知识面试题
2014/03/25 面试题
教师节简报
2015/07/20 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript