Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.04.2014, 09:37
Аватар для Nailya
Кандидат Javascript-наук
Отправить личное сообщение для Nailya Посмотреть профиль Найти все сообщения от Nailya
 
Регистрация: 05.04.2013
Сообщений: 135

вращение вентилятора вокруг своей оси
Добрый день.

Пытаюсь написать скрипт по вращению вентилятора вокруг своей оси: вот ссылка, работает более-менее только в FF: http://test.w-complex.ru/mac/control...rol_panel.html

Задача моя такая, при нажатии на кнопку пуск, вентилятор должен вращаться, при нажатии на стоп - останавливаться.
Но работает, как я уже сказала в FF, и то не стабильно, в осталных браузерах кнопка стоп не срабатывает.

Еще, если два раза нажать на пуск, то вентилятор ускоряет свое движение, а это не нужно. И кнопка стоп в этом случае не срабатывате.

Если у вас какие-н варианты решения этой задачи?

Вот скрипт:

function startRound()
{
    document.getElementById('stop').style.background = '#e8c1c2';
    var el = document.getElementById('vent_img');
    this.Elem = '';
    moveRound(el);
}
function moveRound(el)
    {
        if (this.Elem == '')
        {
            this.Elem = el;
            this.Degree = 0;
            this.intid = setInterval (moveRound, 1);
        }
        else
        {
            if (this.Degree > 100000) {this.Degree = 0}
            this.Degree += 2;
            var txt = 'transform: rotate(' + this.Degree + 'deg); ';          // FireFox
            txt += '-webkit-transform: rotate(' + this.Degree + 'deg); '; // Safari & Chrome
            txt += '-o-transform: rotate(' + this.Degree + 'deg); ';      // Opera
            this.Elem.style.cssText = txt;

        }
        if (document.getElementById('stop').style.background == 'none repeat scroll 0% 0% rgb(237, 28, 36)')
        {
            clearInterval(this.intid);
        }
    }
function stopRound()
{
    document.getElementById('stop').style.background = '#ED1C24';
}


<ul class="ventilator">
                        <li class="start" onclick="startRound();">ПУСК</li>
                        <li class="stop" id="stop" onclick="stopRound()">СТОП</li>
                        <li class="vent"><img src="img/ventilater_small1.png" alt="" id="vent_img"></li>
                    </ul>


.ventilator .start{
    margin-top: 16px;
    padding: 5px 22px;
    border:1px solid #cdcfce;
    background: #bdd9bf;
}
.main  .ventilator .stop{
    margin-top: 16px;
    padding: 5px 22px;
    border:1px solid #cdcfce;
    background: #e8c1c2;
}
.ventilator .start:hover{
    border: 1px solid #59595b;
    background: #28b532;
}
.ventilator .stop:hover{
    border: 1px solid #59595b;
    background: #ED1C24;
}
Ответить с цитированием
  #2 (permalink)  
Старый 18.04.2014, 09:57
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

Ну так а кто мешает отслеживать состояние этого вентилятора через переменные. Как-нибудь так: http://learn.javascript.ru/play/CbSJRb
И зачем такой дикий таймер, не проще увеличить интервал и добавлять больше градусов? ИЛи вообще использовать CSS анимацию.

Последний раз редактировалось jsnb, 18.04.2014 в 10:05.
Ответить с цитированием
  #3 (permalink)  
Старый 18.04.2014, 10:08
Аватар для Nailya
Кандидат Javascript-наук
Отправить личное сообщение для Nailya Посмотреть профиль Найти все сообщения от Nailya
 
Регистрация: 05.04.2013
Сообщений: 135

Спасибо, помогли)
Ответить с цитированием
  #4 (permalink)  
Старый 18.04.2014, 10:48
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

<style type="text/css">
  #vent_img {
    display: inline-block;
    -webkit-animation: imageRotate 1s linear infinite;
    -o-animation: imageRotate 1s linear infinite;
    animation: imageRotate 1s linear infinite;
  }
  @-webkit-keyframes imageRotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
  }
  @-o-keyframes imageRotate {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(360deg);
    }
  }
  @keyframes imageRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
  }
</style>
<ul class="ventilator">
   <li class="start" onclick="startRound();">ПУСК</li>
   <li class="stop" id="stop" onclick="stopRound()">СТОП</li>
   <li class="vent"><img src="http://test.w-complex.ru/mac/control_panel/img/ventilater_small1.png" alt="" id="vent_img"></li>
</ul>
<script>
  function startRound() {
    document.getElementById('vent_img').style.cssText =
              '-webkit-animation-play-state:running;-o-animation-play-state:running;animation-play-state:running;';
  }
  function stopRound() {
    document.getElementById('vent_img').style.cssText =
              '-webkit-animation-play-state:paused;-o-animation-play-state:paused;animation-play-state:paused;';
  }
</script>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine

Последний раз редактировалось devote, 18.04.2014 в 10:56.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
three.js вращение камеры вокруг объекта ppavelstn Библиотеки/Тулкиты/Фреймворки 7 19.12.2016 05:26
Поворот блока вокруг своей оси MR.TOR Events/DOM/Window 5 01.07.2013 18:36
поворот вокруг своей оси IE 10 imediasun1 Элементы интерфейса 0 26.04.2013 21:38