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 版
Mar 24 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 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中调用其他系统http接口的方法说明
2014/02/28 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
python self,cls,decorator的理解
2009/07/13 Python
总结Python编程中三条常用的技巧
2015/05/11 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
python编写弹球游戏的实现代码
2018/03/12 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
python super函数使用方法详解
2020/02/14 Python
苹果美国官方商城:Apple美国
2016/08/24 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
临床医学应届生求职信
2013/11/06 职场文书
工作自荐信
2013/12/11 职场文书
给学校的建议书
2014/03/12 职场文书
春节联欢会策划方案
2014/05/16 职场文书
信访工作经验交流材料
2014/05/23 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
党支部审查意见
2015/06/02 职场文书
SQL写法--行行比较
2021/08/23 SQL Server
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL