Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.08.2013, 14:23
Аватар для Krot
Интересующийся
Отправить личное сообщение для Krot Посмотреть профиль Найти все сообщения от Krot
 
Регистрация: 17.07.2013
Сообщений: 14

Вокруг оси без 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

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

Последний раз редактировалось Krot, 01.08.2013 в 14:30.
Ответить с цитированием
  #2 (permalink)  
Старый 01.08.2013, 14:57
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,135

Сообщение от Krot
элемент должен двигаться по кругу, а не по квадрату
Используй тригонометрические функции...
http://www.webmaze.ru/javascript-dvi...po-okruzhnosti
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поворот блока вокруг своей оси MR.TOR Events/DOM/Window 5 01.07.2013 18:36
поворот вокруг своей оси IE 10 imediasun1 Элементы интерфейса 0 26.04.2013 21:38
html5. Canvas Valdemor (X)HTML/CSS 2 25.08.2012 00:26
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16