HTML
先載入jQuery庫檔案和jquery.fly.min.js插件。
接著，將商品資訊html結構佈置好，本例中，我們用四個商品並排佈置，每個商品box中包括有商品圖片、價格、名稱以及加入購物車按鈕等資訊。
￥3499.00
LG 49LF5400-CA 49吋IPS硬螢幕富貴招財銅錢設計
加入購物車
￥3799.00
Hisense/海信 LED50T1A 海信電視官方旗艦店
加入購物車
￥￥3999.00
Skyworth/創維 50E8EUS 8核心4Kj極清酷開系統智慧液晶電視
加入購物車
￥6969.00
樂視TV Letv X60S 4核心1080P高清3D安卓智慧超級電視
加入購物車
然後，我們還需要在頁面的右側加上購物車以及提示資訊。
CSS
我們使用CSS先將商品排列美化，然後設定右側購物車樣式，請具體看代碼：
.box{浮動：左；寬度：198px；高度：320px；左邊距：5px；邊框：1px實心#e0e0e0；文字對齊：居中}
.box p{行高：20px;內邊距：4px 4px 10px 4px；文字對齊：左}
.box：懸停{邊框：1px實體#f90}
.box h4{行高：32px;字體大小：14px；顏色：#f30；字體粗細：500}
.box h4 span{font-size:20px}
.u-flyer{顯示：塊；寬度：50px；高度：50px；邊框半徑：50px；位置：固定；z-index：9999；}
.m-sidebar{位置：固定；頂部：0；右側：0；背景：#000；z-index：2000；寬度：35px；高度：100%；字體大小：12px；顏色：#fff；}
.cart{顏色：#fff;文字對齊：中心;行高：20px;填滿：200px 0 0 0px;}
.cart span{display:block;width:20px;margin:0 auto;}
.cart i{寬度：35px；高度：35px；顯示：塊；背景：url(car.png) 不重複；}
#msg{位置：固定；頂部：300px；右：35px； z 索引：10000；寬度：1px；高度：52px；行高：52px；字體大小：20px；文字對齊：居中；顏色：#fff；背景： #360；顯示：無}
jQuery
我們要實現的效果是，當用戶點擊「加入購物車」按鈕時，當前商品圖片會變成一個縮小的圓球，以按鈕為起點，向右側以拋物線的形式飛出，最後落進入頁面右邊的購物車裡，並操作提示成功。在飛出之前，我們要取得目前商品的圖片，然後呼叫fly插件，之後的拋物線表格都是由fly插件完成，我們只需定義起點和終點等參數即可。
$(函數() {
var offset = $("#end").offset();
$(".addcar").click(function(event){
var addcar = $(這);
var img = addcar.parent().find('img').attr('src');
var Flyer = $('
');
傳單.fly({
開始：{
left: event.pageX, //開始位置（必填）#fly元素會被設定為position:fixed
top: event.pageY //開始位置（必須填入）
},
結束：{
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(); // 移除 dom
}
});
});
});
腳本>
複製上面的程式碼，儲存並即可看到效果，Fly外掛程式運作的專案官網位址是：https://github.com/amibug/fly，值得一提的是，IE10以下需要加入以下js：
以上就是本文的全部內容了，希望大家能夠喜歡
