js添加購物車效果

時間 2019-12-14

原文原文鏈接

/*
* 添加到購物車動畫 腳本
* */

/***
 * 動畫軌跡控制
 * @param addBtnDom 增長按鈕的dom元素或者選擇器
 * @param shopCarDom 購物車的dom元素或選擇器
 */
function controllPath(addBtn, shopCar) {
    var addBtnDom = null,
        shopCarDom = null;
    if(typeof addBtn === "string"){
       addBtnDom = document.querySelector(addBtn);
    } else if(addBtn instanceof HTMLElement){
        addBtnDom = addBtn
    } else {
        alert("傳入的參數錯誤： 第一個參數應爲增長按鈕的dom元素或該元素的選擇器。");
        return;
    }

    if(typeof shopCar === "string"){
        shopCarDom = document.querySelector(shopCar);
    } else if(shopCar instanceof HTMLElement){
        shopCarDom = shopCar;
    }else {
        alert("傳入的參數錯誤： 第二個參數應爲購物車的dom元素或該元素的選擇器。");
        return;
    }

    // 獲取兩個dom的位置
    var addBtnposition = addBtnDom.getBoundingClientRect();
    var shopCarPosition = shopCarDom.getBoundingClientRect();
    var addBtnCenterX = (addBtnposition.left + addBtnposition.right) / 2;
    var addBtnCenterY = (addBtnposition.top + addBtnposition.bottom) / 2;
    var shopCarCenterX = (shopCarPosition.left + shopCarPosition.right) / 2;
    var shopCarCenterY = (shopCarPosition.top + shopCarPosition.bottom) / 2;
    //計算增長按鈕 是在 相對於購物車的 左邊仍是右邊（用於控制後面的移動方向）
    var relativePosition = addBtnCenterX > shopCarCenterX ? -1 : 1;

    // 獲取連個dom之間的距離
    var xDistance = Math.abs(addBtnCenterX - shopCarCenterX);
    var yDistance = Math.abs(addBtnCenterY - shopCarCenterY);

    // 繪製小球並設置其位置
    var ballDom = drawBall();
    ballDom.style.top = addBtnCenterY + "px";
    ballDom.style.left = addBtnCenterX + "px";
    document.body.appendChild(ballDom);
    /*
     * 根據一元二次方程的軌跡求出對象的係數 y = ax^2 + bx + c
     *  var coefficientC = 0;
     *  var coefficientB = 0;
     *  var coefficientA = yDistance / Math.pow(xDistance, 2);
     */
    //小球的橫豎座標
    var xAbscissa = 0, yAbscissa = 0;

    //設置移動路徑
    var ballTimer = setInterval(function () {
        //每次從新座標
        xAbscissa += 5 * relativePosition;
        yAbscissa = (yDistance / Math.pow(xDistance, 2)) * Math.pow(xAbscissa, 2);
        ballDom.style.top = addBtnCenterY + yAbscissa + "px";
        ballDom.style.left = addBtnCenterX + xAbscissa + "px";
        //檢查是否到達終點
        var surplusDistance = parseInt(ballDom.style.left) - shopCarCenterX;
        if (Math.abs(surplusDistance) <= 10) {
            clearInterval(ballTimer);
        }
    }, 25);
}

/*
* 繪製小球
* */
function drawBall() {
    var ballDom = document.createElement("div");
    ballDom.style.width = "20px";
    ballDom.style.height = "20px";
    ballDom.style.border = "1px solid #ccc";
    ballDom.style.background = "#73dd51";
    ballDom.style.borderRadius = "50%";
    ballDom.style.position = "absolute";
    return ballDom;
}

　　使用說明javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>添加到購物車</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .box {
            position: relative;
            width: 100%;
            height: 100%;
            border: 2px solid #cc726f;
            box-sizing: border-box;
        }

        .add-btn {
            width: 40px;
            height: 40px;
            border: 2px solid orange;
            border-radius: 50%;
            position: absolute;
            top: 10px;
            left: 10px;
            background: antiquewhite;
            box-sizing: border-box;
        }

        .add-btn:before, .add-btn:after {
            content: "";
            position: absolute;
            top: 50%;
            left: 10%;
            margin-top: -2px;
            width: 80%;
            height: 4px;
            background: white;
        }

        .add-btn:after {
            transform: rotate(90deg);
        }

        .shop-car {
            width: 100px;
            height: 40px;
            border: 1px solid #ff574d;
            position: absolute;
            top: 300px;
            left: 100px;
            text-align: center;
            line-height: 40px;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="add-btn"></div>
    <div class="shop-car">購物車</div>
</div>
<script src="./addToCar.js"></script>
<script>
    var addBtnDom = document.querySelector(".add-btn");
    var shopCarDom = document.querySelector(".shop-car");
    addBtnDom.addEventListener("click",function () {
        //第一種方式
        controllPath(addBtnDom, shopCarDom);
        //第二種方式
        //controllPath(".add-btn", ".shop-car");
    })
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。