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 相关文章推荐
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
javascript new后的constructor属性
Aug 05 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
antd配置config-overrides.js文件的操作
Oct 31 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
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
PHP strripos函数用法总结
2019/02/11 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
Python实现线程池代码分享
2015/06/21 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
使用python画社交网络图实例代码
2019/07/10 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
小学教学随笔感言
2014/02/26 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
绿色环保演讲稿
2014/05/10 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
Python图片检索之以图搜图
2021/05/31 Python
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL
浅谈Redis的事件驱动模型
2022/05/30 Redis
源码安装apache脚本部署过程详解
2022/09/23 Servers