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 相关文章推荐
javascript之卸载鼠标事件的代码
May 14 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 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 字符串替换的方法
2012/01/10 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
js中cookie的使用详细分析
2008/05/28 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
javascript中BOM基础知识总结
2017/02/14 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
animate.css在vue项目中的使用教程
2018/08/05 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
Python实现12306火车票抢票系统
2019/07/04 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
浅析Python 多行匹配模式
2020/07/24 Python
python将数据插入数据库的代码分享
2020/08/16 Python
5款实用的python 工具推荐
2020/10/13 Python
空指针到底是什么
2012/08/07 面试题
NULL是什么,它是怎么定义的
2015/05/09 面试题
高二美术教学反思
2014/01/14 职场文书
大学军训感言800字
2014/02/27 职场文书
学生个人自我鉴定
2014/03/26 职场文书
物理学专业自荐信
2014/06/11 职场文书
应用外语系自荐信
2014/06/26 职场文书
科技活动总结范文
2015/05/11 职场文书
一般纳税人申请报告
2015/05/18 职场文书
博士论文答辩开场白
2015/06/01 职场文书
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers
Java 死锁解决方案
2022/05/11 Java/Android