html代码
<div id="goods"></div>
css代码
* {
margin: 0;
padding: 0
}
#goods {
width: 50px;
height: 50px;
background: red;
position: absolute;
right: 0;
top: 200px;
}
div {
width: 10px;
height: 10px;
background: #000;
position: absolute;
}
JS代码
/*
y = a*x*x+b*x;
y = -0.001*X*X+b*x
*/
var goods = document.getElementById("goods");
var iw = document.documentElement.clientWidth - goods.offsetWidth;
document.onclick = function (e) {
var e = e || event;
var div = document.createElement("div");
div.style.left = e.clientX + 'px';
div.style.top = e.clientY + 'px';
document.body.appendChild(div);
/*
如何求出 x y b
原点真实坐标 (iw-50,200)
原点虚拟坐标 (0,0)
*/
var x = e.clientX - iw;
var y = 200 - e.clientY;
var b = (y + 0.001 * x * x) / x;
div.timer = setInterval(function () {
x += 5;
y = -0.001 * x * x + b * x;
if (x >= 0) {
clearInterval(div.timer)
}
div.style.left = iw + x + 'px';
div.style.top = 200 - y + 'px';
}, 30)
}