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 相关文章推荐
Google 静态地图API实现代码
Nov 19 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
js实现纯前端压缩图片
Nov 16 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 cron中的批处理
2008/09/16 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
php curl发送请求实例方法
2019/08/01 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
JS编程小常识很有用
2012/11/26 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
20岁生日感言
2014/01/13 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
公司承诺书怎么写
2014/05/24 职场文书
最常使用的求职信
2014/05/25 职场文书
cf战队收人口号
2014/06/21 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库