复制以下代码,保存成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>