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/