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 27 Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 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读取RSS feed的代码
2008/08/01 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
twig里使用js变量的方法
2016/02/05 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
json 定义
2008/06/10 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
python33 urllib2使用方法细节讲解
2013/12/03 Python
python更新列表的方法
2015/07/28 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
python sorted函数的小练习及解答
2019/09/18 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
先进个人总结范文
2015/02/15 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
基于angular实现树形二级表格
2021/10/16 Javascript
python高温预警数据获取实例
2022/07/23 Python