示意图:
思路:
//购物车的抛物线:
//1、已知起点和终点
//2、计算p的值
//3、动态改变x的值,根据p来计算y的值。
//4、把动态变换的点(x,y)赋给一张图片,
//5、当图片到达终点时,隐藏即可
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none
}
#box{
position:absolute;
left:0px;
top:0px;
width:100px;
height:100px;
background-color:pink;
}
#shoppingCart{
position:absolute;
left:500px;
top:10px;
width:100px;
height:100px;
border:1px solid black;
}
#goods1{
position:absolute;
left:200px;
top:400px;
width:50px;
height:50px;
border:1px solid black;
}
#goods2{
position:absolute;
left:100px;
top:300px;
width:50px;
height:50px;
border:1px solid black;
}
</style>
</head>
<body style="height:1000px">
<div id="shoppingCart">
0
</div>
<div id="goods1">
我是商品1
</div>
<div id="goods2">
我是商品2
</div>
<img id="goodsId" src="images/www.jpg" style="position: absolute; width: 20px; height: 20px;display:none">
</body>
</html>
<script type="text/javascript">
function $(id){
return document.getElementById(id.substring(1));
}
//购物车的抛物线:
//1、已知起点和终点
//2、计算p的值
//3、动态改变x的值,根据p来计算y的值。
//4、把动态变换的点(x,y)赋给一张图片,
//5、当图片到达终点时,隐藏即可
let startPoint={x:200,y:400};
let endPoint = {x:500,y:10};
let p=0;
//初始化数据(计算p)
function initData(){
x=0;
let tempPoint = {x:endPoint.x-startPoint.x,y:endPoint.y-startPoint.y};
//y2 = -2px;
p = (tempPoint.y*tempPoint.y)/(2*tempPoint.x);
}
let myTimer=null;
function moveObj(){
if(myTimer!=null){
window.clearInterval(myTimer);
}
myTimer = setInterval(goStep,10);
}
let x = 0;
let incX = 1;//x的方向
function goStep(){
//1、假定起点在原点的抛物线
x=x+incX;
if(x>endPoint.x-startPoint.x){
$("#goodsId").style.display="none";
$("#shoppingCart").innerHTML = parseInt($("#shoppingCart").innerHTML)+1;
window.clearInterval(myTimer);
myTimer = null;
return;
}
y = -1*Math.sqrt(2*p*x);
//2、改变抛物线的原点(移动原点,偏移)。
let xTemp = x+startPoint.x;
let yTemp = y+startPoint.y;
//外观(改变某个图片的left和top):
//drawPoint({x:xTemp,y:yTemp});
$("#goodsId").style.left = xTemp+"px";
$("#goodsId").style.top = yTemp+"px";
}
//产生移动的图片(动画效果的图片),该图片会沿着抛物线的路径进行移动
function genImg(point){
$("#goodsId").style.display="block";
$("#goodsId").style.left = point.x+"px";
$("#goodsId").style.top = point.y+"px";
}
window.onload = function(){
$("#goods1").onclick = function(event){
let evt = event || window.event;
//重置起点:
startPoint={x:evt.pageX,y:evt.pageY}
initData();//计算p
genImg(startPoint);
moveObj();//根据起点和终点绘制抛物线
}
$("#goods2").onclick = function(event){
let evt = event || window.event;
//重置起点:
startPoint={x:evt.pageX,y:evt.pageY}
initData();//计算p
genImg(startPoint);
moveObj();//根据起点和终点绘制抛物线
}
}
</script>