原生js如何做购物车的抛物线运动，购物车的抛物线怎么做

最新推荐文章于 2023-09-22 16:12:45 发布

田江

最新推荐文章于 2023-09-22 16:12:45 发布

阅读量1.1k

点赞数

分类专栏： JavaScript从入门到精通文章标签： web应用 javascript web开发 web前端开发 DOM

本文链接：https://blog.csdn.net/jiang7701037/article/details/78900963

版权

JavaScript从入门到精通专栏收录该内容

147 篇文章 79 订阅

订阅专栏

复制以下代码，保存成html文件，在浏览器打开，在页面的空白区域点击以下，就会出现效果

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none
}
#startDiv{
position:absolute;
left:50px;
top:600px;
width:10px;
height:10px;
border-radius:50%;
background-color:black;
}
#endDiv{
position:absolute;
left:400px;
top:100px;
width:10px;
height:10px;
border-radius:50%;
background-color:black;
}
#imgId{
position:absolute;
display:none;
}
</style>
</head>
<body style="width:1000px;height:1000px">
<div id="startDiv">

</div>
<img id="imgId" src="img/shop.png"/>
</body>
</html>

<script type="text/javascript">
function $(id){
return document.getElementById(id);
}

function drawPoint(x,y){
//画个点
let divDom = document.createElement("div");
divDom.style.position = "absolute";
divDom.style.left = x+"px";
divDom.style.top = y+"px";
divDom.style.width = "5px";
divDom.style.height = "5px";
divDom.style.borderRadius = "50%";
divDom.style.backgroundColor= "red";
document.body.appendChild(divDom);
}

window.onload = function(){
document.body.onmousedown = function(event){
let evt = event||window.event;
//确定起点
let startPoint = {
left:50,
top:600
};
let endPoint = {
left:evt.pageX,
top:evt.pageY
};

//在鼠标点击的位置画个黑点（表示抛物线的终点）
drawPoint(endPoint.left,endPoint.top);
//把图片显示出来
$("imgId").style.left = startPoint.left+"px";
$("imgId").style.top = startPoint.top+"px";
$("imgId").style.display = "block";

//根据起点和终点计算p的值
let tempPoint = {
x:endPoint.left-startPoint.left,
y:endPoint.top - startPoint.top
}
let p=tempPoint.y*tempPoint.y/(2*tempPoint.x);

let x = 0;
let myTimer = setInterval(function(){
x++;
if(x>endPoint.left-startPoint.left){
window.clearInterval(myTimer);
$("imgId").style.display = "none";
return;
}
//求y （根据公式:y^2=2px）
let y = -1*Math.sqrt(2*p*x);

//画个点
//drawPoint((x-2.5)+startPoint.left,(y-2.5)+startPoint.top);
$("imgId").style.left = (x-2.5)+startPoint.left+"px";
$("imgId").style.top = (y-2.5)+startPoint.top+"px";

},5);
}
}

</script>

田江

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js如何做购物车的抛物线运动，购物车的抛物线怎么做

复制以下代码，保存成html文件，在浏览器打开，在页面的空白区域点击以下，就会出现效果*{margin:0; padding:0;list-style: none}#startDiv{position:absolute;left:50px;top:600px;width:10px;height:10px;border-
复制链接

扫一扫