Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Вокруг оси без canvas (https://javascript.ru/forum/dom-window/40338-vokrug-osi-bez-canvas.html)

Krot 01.08.2013 14:23

Вокруг оси без canvas
 
Ребят нужна помощь.


проблема в том что элемент должен двигаться по кругу, а не по квадрату, не могу понять как это сделать (какая то заставка dvd-шника получается через некоторое время, через минут 5)

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" charset="UTF-8"/>

	<title>Экперименты</title>
    
    <style>
    #central{
        height: 100px;
        width: 100px;
        background-color: black;
        margin: 0px auto;
        position: relative;
    }
    
    #vokrug{
        margin: 0 auto;
        height: 10px; 
        width: 10px; 
        border-radius: 5px;
        background-color: red;
        position: relative;
    }
    
    </style>
</head>

<body>
    <div id="central"><div id="vokrug"></div></div>
    <script>
        
    
        var myvar = document.getElementById('vokrug');
        var supvar = 0;
        var megvar = 0;
        
        sFunc();
        
        mFunc();
        
        
        var bottom = 'on';
        
        var taser = 'on'
               
                
        function sFunc() {
            setTimeout(function() {
                if(taser == 'on') {
                    supvar = supvar + 0.5;
                    
                    if(supvar == 45){
                        taser = 'off';
                    }
                    
                }else {
                    supvar = supvar - 0.5;
                    
                    
                    if(supvar == -45){
                        taser = 'on';
                    }
                };
                
                myvar.style.left = ''+supvar+'px';
                
                sFunc();
            },25);
        };
        
        function mFunc() {
            setTimeout(function() {
               if(bottom == 'on') {
                    megvar = megvar + 1;
                    
                    if(megvar == 90){
                        bottom = 'off';
                    }
                }
                else {
                    megvar = megvar - 1;
                    
                    if(megvar==0){
                        bottom = 'on';
                    }
                }
                myvar.style.top = ''+megvar+'px';
                
                mFunc()();
            },50);
        };
    </script>
</body>
</html>


и хотелось бы реализовать всё без canvas

помогите пожалуйста реализовать :help:

ksa 01.08.2013 14:57

Цитата:

Сообщение от Krot
элемент должен двигаться по кругу, а не по квадрату

Используй тригонометрические функции...
http://www.webmaze.ru/javascript-dvi...po-okruzhnosti


Часовой пояс GMT +3, время: 00:36.