JS高仿抛物线加入购物车特效实现代码
作者：Mr_森哥
本篇文章主要介绍了JS高仿抛物线加入购物车特效实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
1. 简介
要想让你的购物车有种高大上的感觉，加入特效的功能是必不可少的。
2. 实现思路
- 设置一些简单的样式
- 模拟把它添加到购物车中，数量增加
- 从点击的位置开始动画，结束动画
3. 代码实现
CSS代码
咱们给它设置一些简单的样式，让它显得不是那么的太low
.flyer {
display: block;
width: 50px;
height: 50px;
border-radius: 50px;
position: fixed;
margin-left: 50px;
z-index: 9999;
}
.cart img{
width: 60px;
height: 60px;
padding: 5px 0 0 250px;
}
.cartBox span{
display: block;
color: white;
position: absolute;
left: 282px;
top: 226px;
width: 25px;
height: 25px;
border-radius: 50%;
text-align: center;
line-height: 25px;
background-color: red;
}
HTML代码
简单的结构代码，当然，现在写的都很简单！
<div class="box">
</div>
<div class="cartBox">
<div class="cart">
<i id="end"></i>
<span>0</span>
</div>
</div>
简单样式
JS代码
那么，接下来就要让它动起来了，这里我们首先要引入两个第三方库的插件，然后在写JS代码让它动起来！
<script src="js/jquery-3.0.0.min.js"></script> <script src="js/jquery.fly.min.js"></script>
接下来就是见证奇迹的时刻了！
$('.box').on('click', addCart);
var num = 0;
function addCart(event) {
var offset = $('#end').offset(), flyer = $('');
flyer.fly({
start: {
left: event.pageX,
top: event.pageY
},
end: {
left: offset.left + 280,
top: offset.top,
width: 0,
height: 0
}
});
num++;
$('.cartBox span').text(num);
}
最终效果
是不是很简单，有没有学会啊！
4. 结束语
以上就是全部内容了，希望我写东西对大家的学习或者工作能带来一定的帮助，同时也希望读者继续支持脚本之家。