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 相关文章推荐
javascript实现数字+字母验证码的简单实例
Feb 10 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
浅析Node.js 中 Stream API 的使用
Oct 23 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
vue data恢复初始化数据的实现方法
Oct 31 Javascript
详解JSON.stringify()的5个秘密特性
May 26 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
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
jquery 插件开发备注
2010/08/27 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
python实现随机密码字典生成器示例
2014/04/09 Python
Python进程间通信用法实例
2015/06/04 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
人事助理自荐信
2014/02/02 职场文书
《学棋》教后反思
2014/04/14 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
小班教师个人总结
2015/02/05 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸