js加入購物車拋物線動畫與購物車效果特效,親測可用添加到購物車js代碼,當您在電商購物網站瀏覽中意的商品時,您可以點擊頁面中的“加入購物車”按鈕即可將商品加入的購物車中。本文介紹借助一款基于的動畫插件,點擊加入購物車按鈕時添加到購物車js代碼,實現商品將飛入到右側的購物車中的效果。HTML首先載入庫文件和.fly.min.js插件。復制代碼 代碼如下:接著,將商品信息html結構布置好,本例中,我們用四個商品并排布置,每個商品box中包括有商品圖片、價格、名稱以及加入購物車按鈕等信息。復制代碼 代碼如下:¥3499.00LG -CA 49寸IPS硬屏富貴招財銅錢設計加入購物車¥3799./海信 海信電視官方旗艦店加入購物車¥¥3999./創維 8核4Kj極清酷開系統智能液晶電視加入購物車¥6969.00樂視TV Letv X60S 4核1080P高清3D安卓智能超級電視加入購物車然后,我們還需要在頁面的右側加上購物車以及提示信息。復制代碼 代碼如下:購物車已成功加入購物車!CSS我們使用CSS先將商品排列美化,然后設置右側購物車樣式,具體請看代碼: 復制代碼 代碼如下:.box{float:left; width:198px; :320px; -left:5px; :1px solid #; text-align:}.box p{line-:20px; :4px 4px 10px 4px; text-align:left}.box:hover{:1px solid #f90}.box h4{line-:32px; font-size:14px; color:#f30;font-:500}.box h4 span{font-size:20px}.u-flyer{: block;width: 50px;: 50px;-: 50px;: fixed;z-index: 9999;}.m-{: fixed;top: 0;right: 0;: #000;z-index: 2000;width: 35px;: 100%;font-size: 12px;color: #fff;}.cart{color: #fff;t