脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery满意度星级评价插件特效

jQuery满意度星级评价插件特效代码分享

 更新时间：2022年02月23日 14:51:15   投稿：lijiao  
这篇文章主要介绍了jQuery满意度星级评价插件特效,我们可以自定义每个五角星代表的分值，鼠标滑过五角星时即可计算当前的分值，这款jQuery评分插件非常简单而且实用。有需要的小伙伴可以参考下

这是一款基于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 Dialog的内存泄露问题解决方法

    JQuery Dialog的内存泄露问题解决方法

    如何避免JQuery Dialog的内存泄露，需要的朋友可以参考下。
    2010-06-06
  • jQuery实现背景弹性滚动的导航效果

    jQuery实现背景弹性滚动的导航效果

    这篇文章主要介绍了jQuery实现背景弹性滚动导航效果的方法,涉及jQuery动态操作页面元素样式的相关技巧,需要的朋友可以参考下
    2016-06-06
  • jQuery如何封装输入框插件

    jQuery如何封装输入框插件

    这篇文章主要介绍了jQuer输入框插件封装方法，这样可以提高程序员的开发效率，非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-08-08
  • 通过url查找a元素并点击

    通过url查找a元素并点击

    查找a元素的方法有很对，可以通过ID或者class,但如果这两个条件都不具备的话，难道就没有方法了吗？NO,通过url也是可以做到的，下面有个不错的示例，大家可以感受下
    2014-04-04
  • jQuery实现输入框下拉列表树插件特效代码分享

    jQuery实现输入框下拉列表树插件特效代码分享

    这篇文章主要介绍了jQuery实现输入框下拉列表树特效，推荐给大家，有需要的小伙伴可以参考下。
    2015-08-08
  • jquery 按键盘上的enter事件

    jquery 按键盘上的enter事件

    系统默认情况下，使用Tab按键切换页面元素的焦点，有没有想过回车键Enter也可以实现这种功能，并且具有良好的用户体验
    2014-05-05
  • JQuery节点元素属性操作方法

    JQuery节点元素属性操作方法

    这篇文章主要介绍了JQuery节点元素属性操作方法,实例分析了attr与removeAttr方法操作节点元素属性的相关使用技巧,需要的朋友可以参考下
    2015-06-06
  • 聊一聊jQuery插件uploadify使用方法

    聊一聊jQuery插件uploadify使用方法

    聊一聊jQuery插件uploadify使用方法，这篇文章主要总结了uploadify使用的一些经验，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • jQuery控制元素隐藏和显示

    jQuery控制元素隐藏和显示

    本篇文章主要介绍了jQuery控制元素隐藏和显示的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 浅析Cookie中的Path与domain

    浅析Cookie中的Path与domain

    本篇文章主要是对Cookie中的Path与domain进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12

最新评论