jQuery實現加入購物車飛入動畫效果_jquery

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：

以上就是本文的全部內容了，希望大家能夠喜歡