JavaScript > 三角関数

by s_hiroshi

HTML

<div id="ball"></div>

CSS

#ball {
    background-color:#000;
    width:15px;
    height:15px;
    border-radius:15px 15px;
}

JavaScript

// http://jsdo.it/Takayuki.Kayawari/wkAPf
var ball = document.getElementById('ball');
ball.style.position = 'absolute';
ball.style.top = '0px';

function circleMove(element, unit) {
    var cordinate = {
        x: innerHeight / 2,
        y: 0
    },
        x = 0,
        y = 0,
        timer;

    timer = setInterval(function() {
        x += 0.01;
        y += 0.01;
        element.style.top = cordinate.x + unit * Math.sin(x) + 'px';
        if ((unit * y) < innerWidth) {
            element.style.left = unit * y + 'px';
        } else {
            clearInterval(timer);
        }
    }, 10);
};
circleMove(ball, 50);