recherche

Maison  >  Article  >  interface Web  >  Une explication simple de la parabole js

Une explication simple de la parabole js

小云云
小云云original
2018-03-22 16:11:381501parcourir

Cet article partage principalement avec vous une explication simple de la parabole js, j'espère qu'il pourra vous aider. 

<!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>

Recommandations associées :

Partage d'exemples d'opération d'animation parabolique JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Analyse du principe de récursivité jsArticle suivant：Analyse du principe de récursivité js

Articles Liés

Voir plus