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 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
requireJS使用指南
Apr 27 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
JS实现横向轮播图(中级版)
Jan 18 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文件的实现方法
2007/03/19 PHP
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
Python中的闭包实例详解
2014/08/29 Python
python自动格式化json文件的方法
2015/03/11 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
python字典排序的方法
2019/10/12 Python
python 实现dict转json并保存文件
2019/12/05 Python
python3.7添加dlib模块的方法
2020/07/01 Python
国外平面设计第一市场:99designs
2016/10/25 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
介绍一下JNDI的基本概念
2013/07/26 面试题
四年级语文教学反思
2014/02/05 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书