本文主要跟大家分享js拋物線簡單講解,希望能幫助大家。
<!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中文網其他相關文章!