使用jquery.fly插件实现添加购物车抛物动画
这里引用一个插件:jquery.fly.min.js
-
Git源码地址:https://github.com/amibug/fly
-
API使用:
<script src="jquery.js"></script>
<script src="dist/jquery.fly.min.js"></script>
<script>
jQuery(function($) {
$('#fly').fly({
start:{
left: 11, //开始位置(必填)#fly元素会被设置成position: fixed
top: 600, //开始位置(必填)
},
end:{
left: 500, //结束位置(必填)
top: 130, //结束位置(必填)
width: 100, //结束时高度
height: 100, //结束时高度
},
autoPlay: false, //是否直接运动,默认true
speed: 1.1, //越大越快,默认1.2
vertex_Rtop: 100, //运动轨迹最高点top值,默认20
onEnd: function(){} //结束回调
});
$('#fly').play(); //autoPlay: false后,手动调用运动
$('#fly').destroy(); //移除dom
});
</script>
HTML演示代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fly抛物插件</title>
<style type="text/css">
.div1{
width: 50px;
height: 50px;
top: 20%;
left: 10%;
position: absolute;
border: 1px solid;
}
.end{
width: 50px;
height: 50px;
left: 90%;
position: absolute;
border: 1px solid;
}
.shop{
top: 30%;
position: absolute;
}
.much{
top: 33%;
position: absolute;
}
.but{
left: 89.5%;
top: 10%;
position: absolute;
}
</style>
</head>
<body>
<div class="div1" style="background-color: red;"></div>
<p class="shop" style="left:10.5%">商品1</p>
<p class="much" style="left:10.5%">¥10</p>
<div class="div1" style="left: 15%; background-color: yellow;"></div>
<p class="shop" style="left:15.5%">商品2</p>
<p class="much" style="left:15.5%">¥20</p>
<div class="div1" style="left: 20%; background-color: blue;"></div>
<p class="shop" style="left:20.5%">商品3</p>
<p class="much" style="left:20.5%">¥30</p>
<div class="div1" style="left: 25%; background-color: green;"></div>
<p class="shop" style="left:25.5%">商品4</p>
<p class="much" style="left:25.5%">¥40</p>
<div class="div1" style="left: 30%; background-color: cyan;"></div>
<p class="shop" style="left:30.5%">商品5</p>
<p class="much" style="left:30.5%">¥50</p>
<div class="div1" style="left: 35%; background-color: indigo;"></div>
<p class="shop" style="left:35.5%">商品6</p>
<p class="much" style="left:35.5%">¥60</p>
<div class="div1" style="left: 40%; background-color: purple;"></div>
<p class="shop" style="left:40.5%">商品7</p>
<p class="much" style="left:40.5%">¥70</p>
<div class="div1" style="left: 45%; background-color: orange;"></div>
<p class="shop" style="left:45.5%">商品8</p>
<p class="much" style="left:45.5%">¥80</p>
<div class="end"><p>购物车</p><span class="nums" style="color: red;">0</span></div>
<button class="but">清空购物车</button>
</body>
</html>
演示页面如下:
jQuery演示代码:
这里配合获取鼠标指针位置的属性一起使用,如果有不明白的可以参考:获取鼠标位置坐标
<!-- 引入jquery以及fly插件 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src='./js/jquery.fly.min.js'></script>
<script type="text/javascript">
$(function(){
// 获取最后购物车的偏移量
var end_offset = $(".end").offset();
// 监听点击事件
$(".div1").click(function(event){
// 获取当前元素
var thisItem = $(this);
// 复制当前元素的副本作为飞过去的示例
// 如果不复制元素直接使用原元素元素会直接飞过去
var flyer = thisItem.clone();
flyer.fly({
// 开始位置
start:{
left:event.pageX, //获取当前点击元素相对于左边缘的距离
top:event.pageY //获取当前点击元素相对于右边缘的距离
},
end: {
left: end_offset.left + 10, //获取购物车元素的左边偏移值
top: end_offset.top + 10, //获取购物车元素的顶边偏移值
width: 0, //元素飞到终点后的宽度
height: 0, //元素飞到终点时的高度
},
// autoPlay: false, //是否直接运动,默认true
// speed: 1.1, //越大越快,默认1.2
// vertex_Rtop: 100, //运动轨迹最高点top值,默认20
//结束回调
onEnd: function(){
this.destory(); //销毁抛物体
}
});
// 获取当前购物车的数量 自增一赋值实现数量加1
var num = $(".nums") . text();
num++;
$(".nums").text(num);
});
//清空购物车的数量0
$(".but").click(function(){
$(".nums").text(0);
});
});
</script>