购物车 抛物线

Posted 2020-08-27 觉信

代码

$(".cart-increase")是添加按钮  

domShopCart 购物车dom

function bindEvent(){
        $(".cart-increase").on("click",function(){
            var __this = $(this);
            var nStartX = __this.offset().left,
                    nStartY = __this.offset().top,
                    nEndX = domShopCart.offset().left + domShopCart[0].offsetWidth/2,
                    nEndY = domShopCart.offset().top,
                    nTopX = nEndX - 10,
                    nTopY = nEndY - 8;
            var x = nStartX,y = nStartY;
            //新建一个内容
            var domGood = document.createElement(‘div‘);
            domGood.style.width = ‘0.28rem‘;
            domGood.style.height = ‘0.28rem‘;
            domGood.style.background = ‘#75d8bc‘;
            domGood.style.borderRadius = ‘50%‘;
            domGood.style.position = ‘absolute‘;
            domGood.style.left = nStartX + ‘px‘;
            domGood.style.top = nStartY + ‘px‘;
            document.body.appendChild(domGood);

            var a = -((nStartY - nEndY) * (nStartX - nTopX) - (nStartY - nTopY) * (nStartX - nEndX)) / ((nStartX * nStartX - nEndX * nEndX) * (nStartX - nTopX) - (nStartX * nStartX - nTopX * nTopX) * (nStartX - nEndX));
            var b = ((nEndY - nStartY) - a * (nEndX * nEndX - nStartX * nStartX)) / (nEndX - nStartX);
            var c = nStartY - a * nStartX * nStartX - b * nStartX;
            var timer = setInterval(function () {
                /*y = a * x*x + b*x +c;*/
                if (x > nEndX) {
                    x = x - 10;
                    y = a * x * x + b * x + c;
                    domGood.style.left = x + ‘px‘;
                    domGood.style.top = y + ‘px‘;
                }else {
                    domGood.parentNode.removeChild(domGood);
                    clearInterval(timer);
                    var ele = domShopCart[0];
                    domShopCart.css({"transform":"scale(1.2)"});
                    setTimeout(function(){
                        domShopCart.css({"transform":"scale(1)"});
                    },100)
                }
            }, 20);

        });
    }