Javascript-форум - Поворот изображения несколько раз

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Поворот изображения несколько раз (https://javascript.ru/forum/misc/42836-povorot-izobrazheniya-neskolko-raz.html)

Поворот изображения несколько раз

Доброй ночи.
Нужно что бы возле изображения была кнопка которая бы каждый раз после нажатия переворачивала его на 90 градусов (всего 4 позиции).

Нашел вот скрипт который переворачивает картинку: jQueryRotate

Нужно его заставить срабатывать несколько раз. :help: У меня вот не получилось, срабатывает только 1 раз:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.xiper.net/examples/js-plugins/effects/jqueryrotate/js/jqueryrotate.2.1.js"></script>
<img src="http://vinrarus.ucoz.net/D.png" alt="" id="rotateImg"/>


<script type="text/javascript">
function BODIX(){
var BODI = 0;
if (BODI == 0){
var BODI = 1;
jQuery("#rotateImg").rotate({animateTo:90});
}
else if (BODI == 1){
var BODI = 2;
jQuery("#rotateImg").rotate({animateTo:180});
}
else if (BODI == 2){
var BODI = 3;
jQuery("#rotateImg").rotate({animateTo:270});
}
else if (BODI == 3){
var BODI = 0;
jQuery("#rotateImg").rotate({animateTo:360});
}}
</script>
<BR>
<a onclick="BODIX()" href="javascript://">90</a>
<BR><BR>
<a onclick="jQuery('#rotateImg').rotate({animateTo:0})" href="javascript://">Возврат</a>

проблемма в том что каждый раз перезаписываете переменную BODI

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.xiper.net/examples/js-plugins/effects/jqueryrotate/js/jqueryrotate.2.1.js"></script>
<img src="http://vinrarus.ucoz.net/D.png" alt="" id="rotateImg"/>


<script type="text/javascript">
var BODI = 0;
function BODIX(){
if (BODI == 0){
 BODI = 1;
jQuery("#rotateImg").rotate({animateTo:90});
}
else if (BODI == 1){
 BODI = 2;
jQuery("#rotateImg").rotate({animateTo:180});
}
else if (BODI == 2){
 BODI = 3;
jQuery("#rotateImg").rotate({animateTo:270});
}
else if (BODI == 3){
 BODI = 0;
jQuery("#rotateImg").rotate({animateTo:360});
}}
</script>
<BR>
<a onclick="BODIX()" href="javascript://">90</a>
<BR><BR>
<a onclick="jQuery('#rotateImg').rotate({animateTo:0})" href="javascript://">Возврат</a>

Цитата:

Сообщение от animhotep

проблемма в том что каждый раз перезаписываете переменную BODI

Аа, спасибо.
Смешная наверно ошибка. :D

не такая и смешная. понять области видимости переменных это не jQuery подключить)

:write: а может достаточно одной таблетки ... ?

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.xiper.net/examples/js-plugins/effects/jqueryrotate/js/jqueryrotate.2.1.js"></script>
<img src="http://vinrarus.ucoz.net/D.png" alt="" id="rotateImg"/>
<script type="text/javascript">
var BODI = 0, angle = 0;
function BODIX(){
jQuery("#rotateImg").rotate({animateTo: angle+=90 % 360});
}
</script>
<BR>
<a onclick="BODIX()" href="javascript://">90</a>
<BR><BR>
<a onclick="jQuery('#rotateImg').rotate({animateTo:0})" href="javascript://">Возврат</a>

</body>

</html>

А что, такой способ не работает?

jQuery("#rotateImg").rotate({animateTo: '+=90'});

Цитата:

Сообщение от рони

а может достаточно одной таблетки ... ?

Не, так запросто можно забыть начальную ориентацию. :cray:
А в предыдущем варианте видно когда картинка возвращается в начальную ориентацию (только "animateTo:360" в коде сменить на "animateTo:0"). :)