>  기사  >  웹 프론트엔드  >  js 포물선에 대한 간단한 설명

js 포물선에 대한 간단한 설명

小云云
小云云원래의
2018-03-22 16:11:381496검색

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

관련 추천:

JS 포물선 애니메이션 연산 예시 공유

위 내용은 js 포물선에 대한 간단한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:js 재귀 원리 분석다음 기사:js 재귀 원리 분석