抛物线

抛物线思路  

第一步 ： 确定三点坐标

起点  

var startPoint = {

    x : addCart.offsetLeft+addCart.offsetWidth/2,

    y : addCart.offsetTop

}

终点

var endPoint = {

    x : shopCart.offsetLeft+shopCart.offsetWidth/2,

    y : shopCart.offsetTop

}

最高点

var topPoint = {

    x : endPoint.x - 120,（数值随意设置）

    y : endPoint.y - 80  （数值随意设置）

}

第二步 ： 根据三点坐标确定抛物线方程

第三步 ： 创建一个商品，并设置商品的起点位置

创建商品

var good = create("div");

good.className = "good";

document.body.appendChild(good);

设置商品的位置 为起始点坐标

good.style.left = startPoint.x + "px";

good.style.top = startPoint.y + "px";

第四步 ： 商品运动

第五步 ： 根据条件停止商品运动 （商品删除  累加商品个数）

沿着 抛物线的轨迹运动

// y = a*x*x + b*x + c

var x = startPoint.x;//小球运动起始的横坐标

var timer = setInterval( function(){

根据条件停止商品运动 （商品删除  累加商品个数）

    x += 5; left（x轴）

    y = a*x*x + b*x + c; top（y轴）

    if( x > endPoint.x ){

        clearInterval( timer );

        good.remove();

        shopNum.innerHTML = ++num;

    }else{

         good.style.left = x + "px";

         good.style.top = y + "px";

    }

},20 )

 

根据三点坐标确定抛物线的系数

var a = ((startPoint.y - endPoint.y)*(startPoint.x - topPoint.x) - (startPoint.y -  topPoint.y) * (startPoint.x - endPoint.x)) / ((startPoint.x * startPoint.x - endPoint.x *  endPoint.x) * (startPoint.x -  topPoint.x)-(startPoint.x * startPoint.x -  topPoint.x * topPoint.x) * (startPoint.x -  endPoint.x));  

                    

var b = ((endPoint.y - startPoint.y)  - a * (endPoint.x * endPoint.x - startPoint.x *  startPoint.x)) / (endPoint.x - startPoint.x);  

                    

var c = startPoint.y - a *  startPoint.x * startPoint.x - b * startPoint.x;

转载于:https://www.cnblogs.com/tis100204/p/10302302.html