插件官方:? https://github.com/amibug/fly , 官方例子:? http://codepen.io/hzxs1990225/full/ogLaVp ?


首先加載jQuery.js和jquery.fly.min.js插件。?
Html代碼??

<script?src="jquery.js"></script>????

<script?src="jquery.fly.min.js"></script>接著，作4個商品進行演示，每個商品中有圖片、價格、名稱以及加入購物車按鈕等信息。??

<div?class="demo?clearfix">????

???<div?class="per">????

????<img?src="images/1.jpg"?width="180"?height="240"?alt="圖片二"?/>????

????<h3>￥<span>259.00</span></h3>????

????<div?class="title">春款真皮坡跟大碼單鞋內增高女士鞋子</div>????

????<a?href="javascript:void(0);"?class="button?orange?addcart">加入購物車</a>????

???</div>????

???<div?class="per">????

????<img?src="images/2.jpg"?width="180"?height="240"?alt="圖片二"?/>????

????<h3>￥<span>136.00</span></h3>????

????<div?class="title">韓國代購情侶棉衣棉服女款韓版羊羔毛大衣</div>????

????<a?href="javascript:void(0);"?class="button?orange?addcart">加入購物車</a>????

???</div>????

???<div?class="per">????

????<img?src="images/3.jpg"?width="180"?height="240"?alt="圖片三"?/>????

????<h3>￥<span>￥728.00</span></h3>????

????<div?class="title">冬季運動情侶羽絨棉馬甲男士薄馬甲</div>????

????<a?href="javascript:void(0);"?class="button?orange?addcart">加入購物車</a>????

???</div>????

???<div?class="per">????

????<img?src="images/4.jpg"?width="180"?height="240"?alt="圖片四"?/>????

????<h3>￥<span>119.00</span></h3>????

????<div?class="title">原創-城市簡約文藝純色棉麻新中式小立領</div>????

????<a?href="javascript:void(0);"?class="button?orange?addcart">加入購物車</a>????

???</div>????

</div>??

jQuery?
我們要實現的效果是：當點擊“加入購物車”按鈕后，商品圖片會變成一個縮小的圓球，以按鈕為起點，向右側以拋物線的形式飛出到右側的購物車里。在飛出之前，我們要獲取當前商品的圖片，然后調用fly插件，之后的拋物線軌跡都是由fly插件完成，我們只需定義起點和終點左邊以及結束后銷毀之前的動畫。?

Js代碼??

$(function()?{???

????var?offset?=?$("#icon-cart").offset();???

????$(".addcart").click(function(event)?{???

????????var?img?=?$(this).parent().children('img').attr('src');?//獲取當前點擊圖片鏈接???

????????var?flyer?=?$('<img?class="flyer-img"?src="'?+?img?+?'">');?//拋物體對象???

????????flyer.fly({???

????????????start:?{???

????????????????left:?event.pageX,//拋物體起點橫坐標???

????????????????top:?event.pageY?//拋物體起點縱坐標???

????????????},???

????????????end:?{???

????????????????left:?offset.left?+?10,//拋物體終點橫坐標???

????????????????top:?offset.top?+?10,?//拋物體終點縱坐標???

????????????},???

????????????onEnd:?function()?{???

????????????????$("#tip").show().animate({width:?'200px'},300).fadeOut(500);成功加入購物車動畫效果???

????????????????this.destory();?//銷毀拋物體???

????????????}???

????????});???

????});???

});??

以上代碼即可完成加入購物車效果，是不是很棒啊！Fly插件官網： https://github.com/amibug/fly ，另外兼容IE10以下需要添加以下js文件：?
<script src="requestAnimationFrame.js"></script>

總結

以上是生活随笔為你收集整理的jquery.fly.min.js 拋物插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。