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对象的支持
Jul 25 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
jquery提示效果实例分析
Nov 25 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
用webAPI实现图片放大镜效果
Nov 23 Javascript
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
用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
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
js切换div css注意的细节
2012/12/10 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
Python创建字典的八种方式
2019/02/27 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
师范院校学生自荐信范文
2013/12/27 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
信息总监管理职责范本
2014/03/08 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
幼儿教师求职信
2014/05/24 职场文书
党员一帮一活动总结
2014/07/08 职场文书
宇宙与人观后感
2015/06/05 职场文书