jquery实现用户打分评分特效


Posted in Javascript onMay 28, 2015

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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
js 数组的for循环到底应该怎么写?
May 31 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
js评分组件使用详解
Jun 06 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
详解js中的几种常用设计模式
Jul 16 Javascript
vue使用video插件vue-video-player详解
Oct 23 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 #Javascript
javascript转换静态图片,增加粒子动画效果
May 28 #Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 #Javascript
javascript实现行拖动的方法
May 27 #Javascript
JavaScript操作Cookie方法实例分析
May 27 #Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 #Javascript
jquery预加载图片的方法
May 27 #Javascript
You might like
PHP 中执行系统外部命令
2006/10/09 PHP
解析php取整的几种方式
2013/06/25 PHP
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
Prototype源码浅析 Number部分
2012/01/16 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
原生js二级联动效果
2017/06/20 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
Python笔记(叁)继续学习
2012/10/24 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
python将字符串转换成json的方法小结
2019/07/09 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
Python grpc超时机制代码示例
2020/09/14 Python
django跳转页面传参的实现
2020/09/17 Python
python 贪心算法的实现
2020/09/18 Python
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
《囚绿记》教学反思
2014/03/01 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
幼儿学前班评语
2014/12/29 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python