商品飛入購物車效果(pc端)

效果圖

如果用Jquery之類的動畫很難做出拋物線的效果,所以有大神就開發出來了封裝的拋物線運動的插件parabola.js,密碼37t6。

操作很簡單,第一步先引入parabola.js

教程:

一. 創建你想要的飛行物對象,樣式必須加上position:absolute;

<div id="flyEle"></div>

#flyEle{

position:absolute;

}

二.取到飛行物DOM,以及結束位置的DOM

var eleFlyElement = document.querySelector("#flyEle"),//飛行物

? ? ? eleShopCart = document.querySelector("#shopCart");//結束位置的DOM

三. 拋物線函數的規定

// 拋物線運動

var myParabola = funParabola(eleFlyElement, eleShopCart, {

speed: 400, //拋物線速度

curvature: 0.0008, //控制拋物線弧度

complete: function() { //運動結束后的回調事件

eleFlyElement.style.visibility = "hidden"; //飛行物隱藏

// eleShopCart.querySelector("span").innerHTML = ++numberItem;//右邊購物車圖標里的數字加一

}});


四. 給加入購物車按鈕綁定上事件

// 綁定點擊事件

if (eleFlyElement && eleShopCart) {

[].slice.call(document.getElementsByClassName("btnCart")).forEach(function(button) {

button.addEventListener("click", function(event) {

//判斷按鈕在屏幕當中的位置,適當改變飛行物的飛行弧度

var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || 0,

scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0;

eleFlyElement.style.left = event.clientX + scrollLeft + "px";

eleFlyElement.style.top = event.clientY + scrollTop + "px";

eleFlyElement.style.visibility = "visible";

// 需要重定位

myParabola.position().move();});

});}

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?教程結束

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容