首先载入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, 0, height: 0 }, onEnd:function(){ $$("#msg").show().animate({ '250px'}, 200).fadeOut(1000); /*addcar.css("cursor","default").removeClass('orange').unbind('click');*/ this.destory(); } }); });