js实现击购物物品抛物线到购物车

最新推荐文章于 2024-09-05 23:05:05 发布

cangowu

最新推荐文章于 2024-09-05 23:05:05 发布

阅读量4.9k

点赞数 3

分类专栏： javascript 文章标签：前端抛物线

本文链接：https://blog.csdn.net/wzgdjm/article/details/51139930

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

之前刚刚接触前端的时候，听朋友说他去网易面试挂了，然后我问了一些他关于网易面试的情况，他提到了，问题知道了不是很难，但是要实现一些平时不关注的东西，比如说点击购物车的时候有一个抛物线这么个事情。

早上又想起了之前的交流，顿时有了想实现一下购物车抛物线的功能。

1、原理及分析

一开始的时候，我还在图上花了一些实现购物车的原理，但是很快发现不行，所以补了一下购物车的知识，在网上找到了y=a*x*x + b*x +c这样关于抛物线的公式（学习太久了，所以忘了）

下面的实现就很简单了：

找到三个点（x1,y1）,（x2,y2）,（x3,y3）

第一个点取：抛物线开始的点，也就是点击购物的按钮的地方（x1,y1）

第二个点取：抛物线结束的点，也就是购物车的位置（x3,y3）

第三个点取：其实结束的点往左一点取就可以了，可以是结束的点（x3-10,y3-8）,这里可以通过减的值调整抛物线的弧度

这里大家注意一下，其实坐标轴应该是上面这样的，因为购物和购物车的位置都是正数

2、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
        #addToCart {
            position: relative;
            left: 800px;
            cursor: pointer;
            width: 100px;
            height: 40px;
            line-height: 40px;
            border: 1px solid deeppink;
            text-align: center;
            color: deeppink;
        }

        #addToCart:hover {
            color: #fff;
            background-color: deeppink;
        }

        #shopCart {
            position: fixed;
            right: 0;
            top: 100px;
            color: red;
        }
    </style>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="addToCart">
    购物车
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div id="shopCart">
    购物车
</div>


<script>
    window.onload = function () {
        var domAddToCart = document.getElementById('addToCart');
        domAddToCart.onclick = function () {

            var domAddToCart = document.getElementById('addToCart');
            var domShopCart = document.getElementById('shopCart');
            var nStartX = domAddToCart.offsetLeft + 100,
                    nStartY = domAddToCart.offsetTop - document.body.scrollTop,
                    nEndX = domShopCart.offsetLeft,
                    nEndY = domShopCart.offsetTop,
                    nTopX = nEndX - 10,
                    nTopY = nEndY - 8;

            var x = nStartX,y = nStartY;

            //新建一个内容
            var domGood = document.createElement('div');
            domGood.style.width = '20px';
            domGood.style.height = '20px';
            domGood.style.background = 'blue';
            domGood.style.position = 'fixed';
            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);
                }

            }, 20);
        }
    }
</script>
</body>
</html>