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 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
Javascript实现鼠标移入方向感知
Jun 24 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简单的留言板与回复功能具体实现
2014/02/19 PHP
php数组编码转换示例详解
2014/03/11 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
Node.js实现文件上传
2016/07/05 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
使用JavaScript破解web
2018/09/28 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
深入理解NumPy简明教程---数组2
2016/12/17 Python
基于python生成器封装的协程类
2019/03/20 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
甜点店创业计划书
2014/01/27 职场文书
初中班主任寄语
2014/04/04 职场文书
校园环保建议书
2014/05/14 职场文书
小学节能减排倡议书
2014/05/15 职场文书
节约用电标语
2014/06/17 职场文书
广播体操口号
2014/06/18 职场文书
早会开场白台词大全
2015/06/01 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书