search

Home  >  Article  >  Web Front-end  >  A simple explanation of js parabola

A simple explanation of js parabola

小云云
小云云Original
2018-03-22 16:11:381513browse

This article mainly shares with you a simple explanation of js parabola, hoping to help everyone. 

<!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(&#39;.dian&#39;);
            dian.style.left = x + &#39;px&#39;;
            dian.style.top = -y + &#39;px&#39;;
        }, 10)    </script></body></html>

Related recommendations:

JS parabolic animation operation example sharing

The above is the detailed content of A simple explanation of js parabola. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Analysis of js recursion principleNext article：Analysis of js recursion principle

Related articles

See more