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 20 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
Boostrap入门准备之border box
May 09 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
AJAX实现省市县三级联动效果
Oct 16 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获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
webpack多页面开发实践
2017/12/18 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
微信小程序页面渲染实现方法
2019/11/06 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
Python性能提升之延迟初始化
2016/12/04 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
python实现名片管理器的示例代码
2019/12/17 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
《赵州桥》教学反思
2014/02/17 职场文书
导游个人求职信范文
2014/03/23 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
投资入股协议书
2016/03/22 职场文书
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers