首先载入jQuery库文件和jquery.fly.min.js插件。
插件官方: https://github.com/amibug/fly, 官方例子: http://codepen.io/hzxs1990225/full/ogLaVp
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/jquery.fly.min.js"></script>
<div class="m-sidebar">
<div class="cart">
<i id="end"></i>
<span>购物车</span>
</div>
</div>
<div id="msg">已成功加入购物车!</div>
//购物车飞入
var $$=jQuery.noConflict();
//结束位置
var offset = $$("#end").offset();
$$(".addcart").on('click', function(event){
var addcar = $$(this);
//图片路径
var img = addcar.parent().parent().find('img').attr('src');
var flyer = $$('<img class="u-flyer" src="'+img+'">');
flyer.fly({
//开始坐标
start: {
left: document.body.scrollLeft+event.clientX,
top: document.body.scrollLeft+event.clientY
},
//结束坐标
end: {
left: offset.left+10,
top: offset.top+10,
width: 0,
height: 0
},
onEnd:function(){
$$("#msg").show().animate({width: '250px'}, 200).fadeOut(1000);
/*addcar.css("cursor","default").removeClass('orange').unbind('click');*/
this.destory();
}
});
});