ホームページ >ウェブフロントエンド >jsチュートリアル >js放物線の簡単な説明
js放物線の簡単な説明
- 小云云オリジナル
- 2018-03-22 16:11:381541ブラウズ
この記事では主にjs parabolaの簡単な説明を共有します。お役に立てれば幸いです。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* { margin: 0; padding: 0; }
.box { width: 0px; height: 0px; margin-left: 500px; margin-top: 500px; position: relative; }
.dian { position: absolute; width: 4px; height: 4px; margin-left: -2px; margin-top: -2px; border-radius: 50%; background-color: red; }
.row { position: absolute; left: 50%; margin-left: -250px; width: 500px; height: 1px; background-color: green; }
.col { position: absolute; top: 50%; margin-top: -250px; width: 1px; height: 500px; background-color: green; }
</style></head><body>
<p class="box">
<p class="row"></p>
<p class="col"></p>
<p class="dian"></p>
</p>
<script>
var x = -100
setInterval(function () {
x = x + 2; var y = -x * x / 100 + x / 100 + 30; var dian = document.querySelector('.dian');
dian.style.left = x + 'px';
dian.style.top = -y + 'px';
}, 10) </script></body></html>関連おすすめ:
以上がjs放物線の簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jsの再帰原理の解析次の記事：jsの再帰原理の解析