jQuery实现的超简单点赞效果实例分析


Posted in Javascript onDecember 31, 2015

本文实例讲述了jQuery实现的超简单点赞效果,分享给大家供大家参考,具体如下:

1.HTML(可以优化一下,尽量少些几个标签.....)

<div id="dianz">
  <b class="cz"><em>1</em><i></i><s></s><u>超赞</u></b>
  <b class="tj"><em>2</em><i></i><s></s><u>推荐</u></b>
  <b class="yb"><em>3</em><i></i><s></s><u>一般</u></b>
  <b class="wl"><em>6</em><i></i><s></s><u>无聊</u></b>
  <b class="lj"><em>5</em><i></i><s></s><u>雷??lt;/u></b>
</div>

2.css样式

#dianz{text-align:center; width:610px; overflow:hidden;zoom:1; margin:20px auto;}
#dianz b{ display:inline-block; width:120px; height:215px; float:left; position:relative;}
#dianz b em,#dianz b u,#dianz b i,#dianz b s{display:inline-block; width:100%; height:20px; position:absolute; left:0px;}
#dianz b u{ bottom:0px;}
#dianz b s{ bottom:20px; height:95px;}
#dianz b i{width:20px; height:80px;left:50px; bottom:115px;}
#dianz b.cz s{ background:url(../images/dianz.jpg) 25px 0px no-repeat}
#dianz b.cz i{ background-color:#fe0032;}
#dianz b.tj s{ background:url(../images/dianz.jpg) -105px 0px no-repeat}
#dianz b.tj i{ background-color:#fe9903;}
#dianz b.yb s{ background:url(../images/dianz.jpg) -235px 0px no-repeat}
#dianz b.yb i{ background-color:#99c900;}
#dianz b.wl s{ background:url(../images/dianz.jpg) -370px 0px no-repeat}
#dianz b.wl i{ background-color:#32ccff;}
#dianz b.lj s{ background:url(../images/dianz.jpg) -500px 0px no-repeat}
#dianz b.lj i{ background-color:#3167ff;}

3.js(对js运用的不是非常好,大家可以优化的更好一些)

function o_dianz(){
  var oi=$('#dianz b i'); //获取i;
    oem=$('#dianz b em'); //获取em;
    os=$('#dianz b s');//获取s;
    bl=null;
    osz=null;
    Arr=[];
    Arr2=[];
 function o_mm(){
  oem.each(function(){
      osz=$(this).text();
      Arr.push(osz);
      //console.log(Arr)
     });
  var get_max=Math.max.apply(null,Arr); //获取最大点赞数;
  bl=80/get_max;
  oem.each(function(){
      osz=$(this).text();
      var oi_H=Math.floor(osz*bl);
      Arr2.push(oi_H);
     });
  for(var i=0; i<Arr2.length; i++){
      oi.eq(i).height(Arr2[i]);
      oem.eq(i).css('top',80-Arr2[i]);
    };
   };
   o_mm();
  os.click(function(){ //点赞增加;
      Arr=[];
      Arr2=[];
      osz=$(this).siblings('em').text();
      osz++;
      $(this).siblings('em').text(osz);
      o_mm();
    });
  };
o_dianz();

好了,代码都贴上来了,超级简单的。我写的原理(不知道是不是有更好的,同时bug也没有检测):设置i标签的默认高度为80px,然后通过js求出每一个em的text数值,丢入数组Arr中,再通过这个方法Math.max.apply(null,Arr),求最大text的数值,进而求出比例尺(通过最大text求出比例尺可以保证高度不会大于80PX),最后通过每一个text的数值乘以比例尺Math.floor(osz*bl),求出每一个em对应的高度值。<br><br>后面的点击事件中每点击一次图标,相对应的重置一次Arr和Arr2,可以保证数值是实时更新的。。。 OK,到这里就完了,

jQuery实现的超简单点赞效果实例分析

最终结果:

jQuery实现的超简单点赞效果实例分析

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery使用手册之 事件处理
Mar 24 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
Angular6项目打包优化的实现方法
Dec 15 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 Javascript
Javascript实现秒表计时游戏
May 27 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 #Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 #Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 #Javascript
javascript数据类型验证方法
Dec 31 #Javascript
jQuery操作基本控件方法实例分析
Dec 31 #Javascript
javascript图片延迟加载实现方法及思路
Dec 31 #Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 #Javascript
You might like
PHP 错误之引号中使用变量
2009/05/04 PHP
YII实现分页的方法
2014/07/09 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
php注册登录系统简化版
2020/12/28 PHP
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
Javascript的this详解
2019/03/23 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
Python 字典与字符串的互转实例
2017/01/13 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
Django REST framework视图的用法
2019/01/16 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
python获取栅格点和面值的实现
2020/03/10 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
偷看我的初中毕业鉴定
2014/01/29 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
产品开发计划书
2014/04/27 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
教师工作失职检讨书
2014/09/18 职场文书
解除处分决定书
2015/06/25 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书