<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#addToCart {
position: fixed;
left: 600px;
top: 500px;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
color: deeppink;
border: 1px solid #f40;
}
#addToCart:hover {
color: #fff;
background-color: deeppink;
}
.shopCart {
position: fixed;
right: 0;
top: 200px;
}
.shopCart p {
width: 65px;
height: 25px;
line-height: 25px;
text-align: center;
background: deeppink;
color: #000;
}
.active {
width: 25px;
height: 25px;
background: purple;
position: absolute;
}
</style>
</head>
<body>
<div id="addToCart">
添加购物车
</div>
<div class="shopCart" id="shopCart">
购物车
<p id="shopNum"></p>
</div>
<script>
function $(id){
return document.getElementById(id);
}
var addToCart = $('addToCart');
var shopCart = $('shopCart');
var ptext = $('shopNum');
var num = 0;
addToCart.onclick = function(){
// 初始化运动轨迹的三点
//起始点
var startPoint = {
x:addToCart.offsetLeft+addToCart.offsetWidth/2,
y:addToCart.offsetTop+addToCart.offsetHeight/2
}
//结束点
var endPoint = {
x:shopCart.offsetLeft+shopCart.offsetWidth/2,
y:shopCart.offsetTop+shop.offsetHeight/2
}
//最高点
var topPoint = {
x:endPoint.x-180,
y:endPoint.y-100
}
//y=a*x^2+b*x+c;依据上述三点求出系数
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;
//创建一件商品
var shop = document.createElement('div');
shop.classList.add('active');
document.body.appendChild(shop);
var x = startPoint.x;
var y = startPoint.y;
shop.style.left = x+'px';
shop.style.top = y+'px';
var timer = setInterval(function(){
if(x<endPoint.x){
x+=5;
shop.style.left = x+'px';
shop.style.top = a*x*x+b*x+c+'px';
}else{
clearInterval(timer);
num++;
ptext.innerText = num;
shop.remove();
}
},20)
}
</script>
</body>
</html>
如图
four.gif
网友评论