вращение вентилятора вокруг своей оси
Добрый день.
Пытаюсь написать скрипт по вращению вентилятора вокруг своей оси: вот ссылка, работает более-менее только в 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;
}
|
Ну так а кто мешает отслеживать состояние этого вентилятора через переменные. Как-нибудь так: http://learn.javascript.ru/play/CbSJRb
И зачем такой дикий таймер, не проще увеличить интервал и добавлять больше градусов? ИЛи вообще использовать CSS анимацию. |
Спасибо, помогли)
|
<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>
|
| Часовой пояс GMT +3, время: 02:11. |