下面我就来详细讲解一下“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部分了,主要实现以下几个工序:
- 点击点赞图标,触发点赞动效,并增加点赞数;
- 点赞数的变化要以动画效果呈现,从0到目标点赞数进行逐步增加;
- 为了展现随机数字效果,最终要将显示的点赞数结果随机在目标数字的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技术站