下面我来详细讲解“jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)”的完整攻略。
一、前言
本文将介绍如何通过利用 jQuery 实现给图片点赞 +1 的动画效果，使图片在被点赞时，能够有一个很棒的动态效果。我们将使用 jQuery 的点击事件、动画效果等功能来实现该功能。
二、实现步骤
- 第一步：编写 HTML 页面
我们首先需要准备一个 HTML 页面，页面中需要包含要进行点赞 +1 的图片以及需要展示点赞数量的 DOM 元素。HTML 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现的给图片点赞+1动画效果</title>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<style>
.good-box{
position: relative;
display: inline-block;
width: 200px;
height: 200px;
overflow: hidden;
}
.good-pic{
width: 200px;
height: 200px;
}
.good-nums{
position: absolute;
bottom: 0; right: 0;
background-color: rgba(0,0,0,0.7);
color: #fff;
font-size: 14px;
padding: 3px 5px;
}
.good-icon{
position: absolute;
top: -30px; left: 50%;
width: 60px; height: 60px;
margin-left: -30px;
background-image: url('good.png');
background-size: contain;
opacity: 0;
}
</style>
</head>
<body>
<div class="good-box">
<img class="good-pic" src="image.jpg">
<div class="good-nums">0</div>
<div class="good-icon"></div>
</div>
</body>
</html>
在上面的 HTML 代码中，我们使用了一些 CSS 样式来控制图片和 DOM 元素的样式。其中，.good-box 是图片容器，.good-pic 是图片元素，.good-nums 是用来展示点赞数量的 DOM 元素，.good-icon 用来展示点赞的动画效果。
- 第二步：编写 jQuery 代码
在准备好 HTML 结构后，我们需要写一些 jQuery 代码来给图片提供点赞 +1 的功能，并实现点赞动画。代码如下：
$(function(){
var goodBox = $('.good-box');
var goodNum = goodBox.find('.good-nums');
var goodIcon = goodBox.find('.good-icon');
var goodNumVal = parseInt(goodNum.text());
goodBox.on('click',function(e){
goodNum.text(goodNumVal+=1);
var clickX = e.clientX - goodBox.offset().left + 'px';
var clickY = e.clientY - goodBox.offset().top + 'px';
goodIcon.css({'top':clickY, 'left':clickX, 'opacity':1}).animate({'top':clickY-60},500,function(){
this.style.opacity = 0;
});
});
});
在上面的代码中，我们使用了 jQuery 的 on 方法来监听点击事件，每次点击时给点赞数 +1，然后使用 animate 方法给 .good-icon 元素添加上浮向上飞的效果，并且在动画结束后将其透明度设置为 0。当我们整合上述代码后，我们就可以得到一个非常炫酷的“给图片点赞+1动画效果”了。
三、示例说明
下面，我举两个示例来说明 jQuery 实现的给图片点赞+1动画效果的使用：
示例一：给多张图片点赞
在这个示例里，我们将学会如何通过将代码应用到多张图片上来给多张图片提供“点赞+1”的功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现的给多张图片点赞+1动画效果</title>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<style>
.good-box{
position: relative;
display: inline-block;
width: 200px;
height: 200px;
overflow: hidden;
}
.good-pic{
width: 200px;
height: 200px;
}
.good-nums{
position: absolute;
bottom: 0; right: 0;
background-color: rgba(0,0,0,0.7);
color: #fff;
font-size: 14px;
padding: 3px 5px;
}
.good-icon{
position: absolute;
top: -30px; left: 50%;
width: 60px; height: 60px;
margin-left: -30px;
background-image: url('good.png');
background-size: contain;
opacity: 0;
}
</style>
</head>
<body>
<div class="good-box">
<img class="good-pic" src="image1.jpg">
<div class="good-nums">0</div>
<div class="good-icon"></div>
</div>
<div class="good-box">
<img class="good-pic" src="image2.jpg">
<div class="good-nums">0</div>
<div class="good-icon"></div>
</div>
<div class="good-box">
<img class="good-pic" src="image3.jpg">
<div class="good-nums">0</div>
<div class="good-icon"></div>
</div>
<script>
$(function(){
$('.good-box').each(function(){
var goodBox = $(this);
var goodNum = goodBox.find('.good-nums');
var goodIcon = goodBox.find('.good-icon');
var goodNumVal = parseInt(goodNum.text());
goodBox.on('click',function(e){
goodNum.text(goodNumVal+=1);
var clickX = e.clientX - goodBox.offset().left + 'px';
var clickY = e.clientY - goodBox.offset().top + 'px';
goodIcon.css({'top':clickY, 'left':clickX, 'opacity':1}).animate({'top':clickY-60},500,function(){
this.style.opacity = 0;
});
});
})
});
</script>
</body>
</html>
在这个示例中，我们将 .good-box 容器设置了三个，每个容器中分别包含一张图片、一个用于展示点赞数量的 DOM 元素和一个用于展示动画效果的 DOM 元素。通过 $('.good-box').each() 循环遍历每个 .good-box 容器，从而实现了给多张图片点赞的功能。
示例二：美化点赞动画效果
在这个示例中，我们将添加一些额外的CSS样式来美化点赞的动画效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现的美化点赞动画效果</title>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<style>
.good-box{
position: relative;
display: inline-block;
width: 200px;
height: 200px;
overflow: hidden;
}
.good-pic{
width: 200px;
height: 200px;
}
.good-nums{
position: absolute;
bottom: 0; right: 0;
background-color: rgba(0,0,0,0.7);
color: #fff;
font-size: 14px;
padding: 3px 5px;
}
.good-icon{
position: absolute;
top: -30px; left: 50%;
width: 60px; height: 60px;
margin-left: -30px;
background-image: url('good.png');
background-size: contain;
opacity: 0;
transition: all 0.5s ease;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="good-box">
<img class="good-pic" src="image.jpg">
<div class="good-nums">0</div>
<div class="good-icon"></div>
</div>
<script>
$(function(){
var goodBox = $('.good-box');
var goodNum = goodBox.find('.good-nums');
var goodIcon = goodBox.find('.good-icon');
var goodNumVal = parseInt(goodNum.text());
goodBox.on('click',function(e){
goodNum.text(goodNumVal+=1);
var clickX = e.clientX - goodBox.offset().left + 'px';
var clickY = e.clientY - goodBox.offset().top + 'px';
goodIcon.css({'top':clickY, 'left':clickX, 'opacity':1}).animate({'top':clickY-60},500,function(){
this.style.opacity = 0;
});
});
});
</script>
</body>
</html>
在上述代码中，我们使用了额外的 CSS 样式来美化点赞动画效果。通过添加 transition 属性，我们使得点赞动画更加顺滑，同时也展示了动画中 DOM 元素的圆形动画效果。
四、结语
到这里，我们就通过 jQuery 实现的给图片点赞+1动画效果的完整攻略，实现了一个非常有趣的效果并且也展示了一些有用的应用方法。如果你有任何问题或建议，请随时在评论区中留言。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载) - Python技术站
微信扫一扫 
支付宝扫一扫 