您的位置：首页 > Web前端 > JavaScript

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

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

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

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>


3、效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航