插件官方:? 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個(gè)商品進(jìn)行演示，每個(gè)商品中有圖片、價(jià)格、名稱以及加入購物車按鈕等信息。??

<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">春款真皮坡跟大碼單鞋內(nèi)增高女士鞋子</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">冬季運(yùn)動(dòng)情侶羽絨棉馬甲男士薄馬甲</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">原創(chuàng)-城市簡約文藝純色棉麻新中式小立領(lǐng)</div>????

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

???</div>????

</div>??

jQuery?
我們要實(shí)現(xiàn)的效果是：當(dāng)點(diǎn)擊“加入購物車”按鈕后，商品圖片會(huì)變成一個(gè)縮小的圓球，以按鈕為起點(diǎn)，向右側(cè)以拋物線的形式飛出到右側(cè)的購物車?yán)铩Ｔ陲w出之前，我們要獲取當(dāng)前商品的圖片，然后調(diào)用fly插件，之后的拋物線軌跡都是由fly插件完成，我們只需定義起點(diǎn)和終點(diǎn)左邊以及結(jié)束后銷毀之前的動(dòng)畫。?

Js代碼??

$(function()?{???

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

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

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

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

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

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

????????????????left:?event.pageX,//拋物體起點(diǎn)橫坐標(biāo)???

????????????????top:?event.pageY?//拋物體起點(diǎn)縱坐標(biāo)???

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

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

????????????????left:?offset.left?+?10,//拋物體終點(diǎn)橫坐標(biāo)???

????????????????top:?offset.top?+?10,?//拋物體終點(diǎn)縱坐標(biāo)???

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

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

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

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

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

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

????});???

});??

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。