當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
抛物线运动JavaScript实现
生活随笔
收集整理的這篇文章主要介紹了
抛物线运动JavaScript实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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)}總結
以上是生活随笔為你收集整理的抛物线运动JavaScript实现的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 离开一座城市发朋友圈的句子180个
- 下一篇: 小班数学教案《收拾玩具》反思