首页 > 代码库 > 购物车 抛物线

购物车 抛物线

代码

$(".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);        });    }

 

购物车 抛物线