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

本文实例讲述了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>雷囧</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程序设计有所帮助。

(0)

相关推荐

  • jquery心形点赞关注效果的简单实现

    html代码 <div class="stage"> <div class="heart"></div> </div> css代码 .heart { width: 100px; height: 100px; background: url("") no-repeat; background-position: 0 0; cursor: pointer; -webkit-transition: bac

  • jQuery+ajax实现实用的点赞插件代码

    之前给大家总结了jQuery插件开发的两种方式,这里就实践一下,做一款点赞特效插件,先看看效果吧: 废话少说,上代码: //***扩展对象点赞插件.点赞特效***// //***Zynblog**// //***2016-5-11**// //***用法:jQuery('.praisebtn').praise(options);***// ; (function ($) { $.fn.praise = function (options) { var defaults = { obj: null

  • jQuery简单实现QQ空间点赞已经取消点赞

    看到有网友制作了对空间好友的动态点赞,加了个以及取消赞的功能.直接运行的脚本 好友动态点赞代码 jQuery("a.qz_like_btn_v3[data-clicklog='like']").each(function(index,item){ console.log(item); jQuery(item).trigger('click'); }); jQuery(window).scroll(function(){ jQuery("a.qz_like_btn_v3[dat

  • jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)

    本文实例讲述了jQuery实现的点赞随机数字显示动画效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=

  • jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)

    本文实例讲述了jQuery实现的给图片点赞+1动画效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&

  • jQuery+ajax实现文章点赞功能的方法

    本文实例讲述了jQuery+ajax实现文章点赞功能的方法.分享给大家供大家参考,具体如下: 前几日有童鞋问我索要本站右上角的点赞功能,麦葱左思右想,决定把这功能分享出来,希望此功能对各位会带来方便哦. 代码很简单,jQuery+php实现的. jQuery代码: jQuery(document).ready(function($) { $(".zan").click(function(e){ var $i=$(".zan i"), $b=$("<b

  • jQuery实现简单的点赞效果

    本文实例讲解了jQuery实现简单的点赞效果的详细代码,具体内容如下 效果图: 下面提供一个"点赞"的实例代码,用ASP.NET MVC4+jQuery Ajax实现. Model: namespace MvcAjaxAdd.Models { public class ClickCountModel { [Key] [DatabaseGeneratedAttribute(System.ComponentModel.DataAnnotations.Schema.DatabaseGener

  • jquery点赞功能实现代码 点个赞吧!

    要实现的点赞功能比较简单,就是实现点击按钮,有心向上飘,一直飘出屏幕外. 首先只需要在body中定义一个button.和盛放心的盒子 <div id = "demo"></div> <input type = "button" id = "btn1" value = "点个赞吧" /> 由于还要引进心的图片,所以在这里我们在设置css样式的时候还要设置图片img的样式. css代码如下: &

  • php+jQuery+Ajax实现点赞效果的方法(附源码下载)

    本文实例讲述了php+jQuery+Ajax实现点赞效果的方法.分享给大家供大家参考,具体如下: 数据库设计 先准备两张表,pic表保存的是图片信息,包括图片对应的名称.路径以及图片"赞"总数,pic_ip则记录用户点击赞后的IP数据. CREATE TABLE IF NOT EXISTS `pic` ( `id` int(11) NOT NULL AUTO_INCREMENT, `pic_name` varchar(60) NOT NULL, `pic_url` varchar(60

  • jQuery+CSS3实现点赞功能

    效果图: 图(1) 初始图 图(2) 点击后 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m

随机推荐