jquery实现用户打分评分特效
2015-05-28 10:49
796 查看
js代码:
<script type="text/javascript"> $(function(){ //简洁用户评分代码 $(".pfxtFen li").click(function(){ $(this).addClass("pfxtCur"); $(this).prevAll().addClass("pfxtCur"); $(this).nextAll().removeClass("pfxtCur"); }); $(".pfxtFen li").dblclick(function(){ $(".pfxtFen li").removeClass("pfxtCur"); }); }) </script>
CSS
<style type="text/css"> *{margin:0;padding:0; font-family:"微软雅黑"} ul{ list-style:none;} /*用户评分*/ .pingfenxitong{ padding:15px 0; width:500px; margin:0 auto; } .pingfenList{ float:left; width:500px; padding-right:20px; } .pfxtTitle{ font-weight:bold; font-size:1.2em; padding:4px 0; } .pfxtText{ line-height:25px; } .pfxtFen{ margin:10px 0; } .pfxtFen li{ float:left; width:98px; height:30px; text-align:center; line-height:30px; border:#ddd 1px solid; background:#f1f1f1; cursor:pointer; } .pfxtFen li.pfxtCur{ background:#308A95; color:#fff; border:#308A95 1px solid; } </style>
HTML
<div class="pingfenxitong"> <div class="pingfenList"> <div class="pfxtTitle">功能:</div> <div class="pfxtText">你觉得这个创意在功能上优秀吗?</div> <ul class="pfxtFen" title="双击取消评分"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <div class="clearfix"></div> </ul> <div class="pfxtRight"></div> <div class="clearfix"></div> </div> <div class="pingfenList"> <div class="pfxtTitle">外观:</div> <div class="pfxtText">你觉得这个创意在外观上优秀吗?</div> <ul class="pfxtFen" title="双击取消评分"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <div class="clearfix"></div> </ul> <div class="pfxtRight"></div> <div class="clearfix"></div> </div> <div class="pingfenList"> <div class="pfxtTitle">成本:</div> <div class="pfxtText">你觉得这个创意在成本上优秀吗?</div> <ul class="pfxtFen" title="双击取消评分"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <div class="clearfix"></div> </ul> <div class="pfxtRight"></div> <div class="clearfix"></div> </div> <div class="pingfenList"> <div class="pfxtTitle">难度:</div> <div class="pfxtText">你觉得这个创意在难度上可行吗?</div> <ul class="pfxtFen" title="双击取消评分"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <div class="clearfix"></div> </ul> <div class="pfxtRight"></div> <div class="clearfix"></div> </div> <div class="clearfix"></div> </div>
以上所述就是本文的全部内容了,希望大家能够喜欢。
您可能感兴趣的文章:
相关文章推荐
- jquery实现用户打分评分特效
- jquery插件star-rating.js实现星级评分特效
- 用jquery实现鼠标滑动星级评分特效
- 【前端】jQuery实现锚点向下平滑滚动特效
- JQuery实现简单的图片滑动切换特效
- 使用jquery.cookie.js实现记住用户信息(下面以web的记住登录名和密码为例进行说明)
- jQuery实现的Div窗口震动特效
- jquery实现炫酷的叠加层自动切换特效
- 基于jquery实现下拉框美化特效
- jquery实现的动态回到顶部特效代码
- JQuery和原生JavaScript实现网页定位导航特效
- jQuery图片渐变特效的简单实现
- 基于jQuery实现Div窗口震动特效代码-代码简单
- jQuery实现web页面樱花坠落的特效
- jQuery实现鼠标经过显示动画边框特效
- jquery实现多屏多图焦点图切换特效的方法
- jquery实现鼠标悬浮停止轮播特效
- jQuery+Ajax用户登录功能的实现
- jquery实现select下拉框美化特效代码分享