Move the div to the degrees value in Javascript

3

Simply move the div toward the degress value.

I did several ways, but I can not. A code I'm trying to: link

"Does anyone have any light / solution to this problem?!"

Signage / Example below:

Thank you!

    
asked by anonymous 18.06.2015 / 03:47

1 answer

1

I got it!

Thanks for everyone's help! : D

More details and running: link

Javascript code only:


function SomenteNumero(v)
{      
  return v.replace(/\D/g,"");  
}

/*
A função vai pegar o valor do rotateZ, mas somente o número.
Exemplo:
    DE: <div id="ID" style="-webkit-transform: rotateZ(320deg);" ></div>
    PARA: 320

Entendeu?! :D
*/
var get_rotate = function()
{
    var z = SomenteNumero( document.getElementById(" ID ").style.WebkitTransform );
    return z;
}

/*
A mágica é nesta função milagrosa! rsrs'

window.body_largura = Largura do body em px.
window.body_altura =  Altura do body em px.
*/
var efeito_ir = function( velocidade )
{   
    var deg = get_rotate(); //Pega o valor do rotateZ atual
    var plus = velocidade; //$velocidade: quanto maior é o valor, maior é a distância. Recomendado é de 10 á 100

    var rotation = deg - 270;
    var dist = Math.sqrt( (window.body_largura * plus)^2 + (window.body_altura * plus)^2);
    var degtorad = Math.PI/180;

    var x = Math.cos(degtorad * (rotation)) * dist;
    var y = Math.sin(degtorad * (rotation)) * dist;

    x = Math.round( document.getElementById(" ID ").offsetLeft + (-x) );
    y = Math.round( document.getElementById(" ID ").offsetTop + (-y) );

    console.log("X: " + (x) );
    console.log("Y: " + (y) );

    document.getElementById(" ID ").style.top = y + "px";
    document.getElementById(" ID ").style.left = x + "px";  

}
    
21.06.2015 / 04:36