最近做了一个项目,添加购物车想要一个小球运动的效果,找了一个抛物插件,简单好用!
用到一个jQuery插件:jquery.fly.min.js
可以在网上下载一个哦!
<!--运动开始的地方-->
<img class="add" src="img/addCar.png" alt="">
<!--运动结束的地方-->
<div>
<i id="footer_end"></i>
<img src="img/car.png" alt="">
<p>购物车</p><span>1</span>
</div>
<script src="js/jquery.fly.min.js"></script>
<script>
//添加到购物车效果
//给添加按钮添加点击事件,执行addCart函数
$('.add').on('click', addCart);
function addCart(event) {
//设定一个计时器,指定运动时间
var timer = setTimeout(setTime,500);
//找到i标签的位置,创建一个运动式的标签flyer
var offset = $('#footer_end').offset(), flyer = $('<p style="width: 0.4rem;height: 0.4rem; border-radius: 50%;background-color: #00D0E8"></p>');
flyer.fly({
start: {
left: event.pageX,
top: event.pageY
},
end: {
left: offset.left-17, //指定落下时距离左边的位置,值可以改变
top: offset.top-5, //指定落下时距离上边的位置,值可以改变
width: 0,
height: 0
}
});
}
</script>
大功告成!不喜勿喷!谢谢!