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

下面我就来详细讲解一下“jQuery实现的点赞随机数字显示动画效果”的攻略。

想法

这个点赞随机数字显示动画效果,关键在于实现随机数字的动态显示。我们可以运用jQuery的animate()方法,实现数字从0到目标点赞数(模拟数字增加)的过程动效,然后将最终结果随机到目标点赞数的附近,展示难以预测的效果。

HTML

首先,我们需要先布置好页面的HTML结构:

<div class="p-lab">
  <p id="p-count">0</p>
  <div class="p-thumb">
    <a href="#" class="fa fa-thumbs-up"></a>
  </div>
</div>

其中,p标签内的数字是点赞数,我们需要通过JS实现动态更新;i标签则是点赞图标,可以更换成自己想要的图标。

CSS

接下来,我们编写CSS样式,为点赞图标进行布局与样式设定。

.p-lab {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
}

#p-count {
  margin: 0 10px;
}

.p-thumb {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.p-thumb .fa {
  font-size: 80px;
  color: #999;
  transition: all 0.3s ease;
}

.p-thumb .fa.active {
  transform: scale(1.2);
  color: #e91e63;
}
  • 调整了点赞数文字与点赞图标的排列方式。
  • 设定了点赞图标的默认样式,还有active状态下的样式变化。

JS

最核心的代码就是JS部分了,主要实现以下几个工序:

  1. 点击点赞图标,触发点赞动效,并增加点赞数;
  2. 点赞数的变化要以动画效果呈现,从0到目标点赞数进行逐步增加;
  3. 为了展现随机数字效果,最终要将显示的点赞数结果随机在目标数字的10%范围内。
// 获取点赞数p元素
var p = $("#p-count");
// 获取点赞图标元素
var thumb = $(".p-thumb .fa");

// 点赞图标点击事件
thumb.on("click", function() {
  if ($(this).hasClass("active")) {
    return;
  }

  // 点赞动效
  $(this).addClass("active");
  setTimeout(function(){
    thumb.removeClass("active");
  }, 1000);

  // 获取点赞数当前值和目标值
  var count = parseInt(p.text());
  var target = parseInt(p.text()) + 1;

  // 点赞数逐步增加动画
  var numAnim = new CountUp(p[0], count, target, 0, 1.5, {
    useEasing: true,
    useGrouping: true,
    separator: ','
  });
  numAnim.start();

  // 点赞数结果随机在目标数字的10%范围内
  setTimeout(function(){
    var randomNum = Math.round(Math.random() * target * 0.1);
    var resultNum = target - randomNum;
    p.text(resultNum);
  }, 1500);
});

示例

接下来,我将讲解两个实际案例中的使用方式:

示例一

考虑在form表单中,为喜欢/赞一个活动的按钮提供点赞随机数字效果。HTML代码如下:

<form>
  <input type="submit" value="喜欢!" class="like-button">
  <div class="like-num-box">
    <i class="fa fa-heart"></i>
    <span class="like-num">0</span>
  </div>
</form>

按钮和数字对应,一起放在form表单中。JS代码实现如下:

// 获取elements
var likeButton = $(".like-button");
var likeNum = $(".like-num");

//按钮事件绑定
likeButton.on("click", function(e){
  e.preventDefault();

  //预设数据
  var count = parseInt(likeNum.text());
  var target = count + 1;

  // 数字动态效果
  var numAnim = new CountUp(likeNum[0], count, target, 0, 1.5, {
    useEasing: true,
    useGrouping: true,
    separator: ','
  });
  numAnim.start();

  // 点赞数结果随机在目标数字的10%范围内
  setTimeout(function(){
    var randomNum = Math.round(Math.random() * target * 0.1);
    var resultNum = target - randomNum;
    likeNum.text(resultNum);
  }, 1500);

  // 禁止按钮多次点赞
  $(this).attr("disabled", "disabled");
});

示例二

还可以结合Ajax,实现瀑布流下拉自动加载的“点赞收藏”效果。HTML和JS代码如下:

<ul>
  <li>
    <div class="post">
      <h2 class="post-title">文章标题</h2>
      <div class="post-content">这是一篇文章的内容...</div>
      <div class="post-action">
        <span class="time">22小时前</span>
        <span class="like-num">0</span>
        <a href="#!" class="like-button">点赞</a>
      </div>
    </div>
  </li>
  <li>
    ...
  </li>
  ...
</ul>
//初始化
var page = 0;
var isLoading = false;
var length = 10;

// Ajax请求
function getPostData() {
  // 防止重复加载
  if (isLoading) return;
  isLoading = true;
  page++;

  // URL
  var url = "http://www.example.com/getPosts.php?page=" + page + "&length=" + length;
  $.ajax({
    type: "GET",
    url: url,
    success: function(data){
      var posts = data.posts;

      // 渲染DOM
      for (var i = 0; i < posts.length; i++) {
        var post = posts[i];
        var html = createPostHtml(post);
        $(".posts ul").append(html);
      }

      // 点赞数动态效果
      $(".like-button").on("click", function(e){
        e.preventDefault();

        var likeButton = $(this);
        var likeNum = $(this).siblings(".like-num");
        var postId = $(this).closest(".post").data("id");

        // 防止按钮多次点赞
        if (likeButton.hasClass("disabled")) return;
        likeButton.addClass("disabled");

        // 修改数据库(省略)

        // 动态显示点赞数
        var count = parseInt(likeNum.text());
        var target = count + 1;

        // 数字动态效果
        var numAnim = new CountUp(likeNum[0], count, target, 0, 1.5, {
          useEasing: true,
          useGrouping: true,
          separator: ','
        });
        numAnim.start();

        // 点赞数结果随机在目标数字的10%范围内
        setTimeout(function(){
          var randomNum = Math.round(Math.random() * target * 0.1);
          var resultNum = target - randomNum;
          likeNum.text(resultNum);
        }, 1500);

      });

      //处理请求完毕
      isLoading = false;
    }
  });
}

源码&演示

完整的源码和演示使用可到以下链接获取:

  • 源码下载地址:https://github.com/loognii/jQuery-countUp-ThumbUp
  • 在线演示地址:https://loognii.github.io/jQuery-countUp-ThumbUp/

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载) - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • layui禁用侧边导航栏点击事件的处理方法

    要禁用layui侧边导航栏点击事件,需要进行如下操作: 步骤一:添加代码 在需要禁用侧边导航栏点击事件的地方添加以下代码: $(".layui-nav-tree a").on("click", function(){ return false; }); 以上代码通过Jquery给导航栏内所有a标签添加了一个点击事件,返…

    css 2023年6月9日
    00
  • css图标制作教程制作云图标

    下面我会详细讲解如何制作云图标的完整攻略,包含以下几个步骤: 1. 准备工作 在制作过程中,我们需要准备两个东西,一是云的SVG图标文件,二是实现动画效果的CSS代码: (1)SVG图标文件: 首先需要使用Adobe Illustrator或其他矢量图形编辑软件,设计并导出一个云的SVG图标文件,示例如下: <svg width="24px&…

    css 2023年6月10日
    00
  • CSS实现两列布局的N种方法

    以下是“CSS实现两列布局的N种方法”的详细攻略: 一、使用浮动实现两列布局 首先,需要在HTML结构中创建两个div,用来表示左右两个列,例如: <div class="left-column">左侧内容</div> <div class="right-column">右侧内容&l…

    css 2023年6月10日
    00
  • css3实现波纹特效、H5实现动态波浪效果

    CSS3实现波纹特效攻略: 常用技术 CSS3 transform CSS3 animation CSS3 transition box-shadow 实现步骤 首先我们需要创建一个HTML元素,为了方便,我们可以选用button元素。 然后在CSS中设置该元素的基本样式,包括大小、颜色和位置等。 接下来,我们需要设置hover伪类,当该元素被hover时,…

    css 2023年6月10日
    00
  • 浅谈CSS中的OOCSS编程方式

    浅谈CSS中的OOCSS编程方式 什么是OOCSS? OOCSS是指基于面向对象设计的CSS编程方式,其主要思想是将CSS样式分离为可重复利用的模块(组件)。OOCSS的编程方法使用较少的CSS选择器和更多的类名,以增加代码的可重用性和可扩展性。 怎么使用OOCSS? 以下是一些使用OOCSS编程方式的建议: 1.分类样式 将CSS样式按照功能分类,这可以使…

    css 2023年6月9日
    00
  • 兼容主流浏览器的CSS透明代码(必看篇)

    下面详细讲解“兼容主流浏览器的CSS透明代码(必看篇)”的完整攻略。 什么是CSS透明代码 CSS透明代码是指在Web页面中,通过CSS样式实现元素背景透明的技术。 通过调节透明度值,可以让元素显示成半透明或全透明,从而带来更好的视觉效果,让页面看起来更加美观。 如何实现兼容主流浏览器的CSS透明代码 下面是一些常用的CSS透明代码实现方式: 使用RGBA颜…

    css 2023年6月9日
    00
  • 利用CSS3的3D效果制作正方体

    制作3D正方体这个过程通常可以分为以下几个步骤: 1.确定一个容器,为3D场景提供空间,可以设定宽、高、以及透视效果的角度。 2.设置立方体的六个面,让它们呈现出正方形。 3.将六个面浮起来,让立方体看起来具有体积感。 下面将详细讲解如何实现以上的步骤,其中包括两个样例说明: 1.基础版3D正方体: HTML代码如下: <div class=&quot…

    css 2023年6月10日
    00
  • 纯html+css实现奥运五环的示例代码

    下面是详细讲解“纯html+css实现奥运五环的示例代码”的完整攻略: 设计思路 为了实现五环,需要先把它们的几何形状考虑清楚。五环都可以用简单的线段来描述,然后填充对应的颜色。我们可以使用<div>元素来代表每个环,然后设置对应的样式来实现填充色。在样式中,使用border-radius属性来绘制圆弧边框,使五环看起来更协调。另外,为了让五环居…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部