Форум

VINRARUS · #1 (**permalink**) 11.11.2013, 17:57

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

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

Нужно его заставить срабатывать несколько раз.

У меня вот не получилось, срабатывает только 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>

animhotep · #2 (**permalink**) 11.11.2013, 18:23

проблемма в том что каждый раз перезаписываете переменную 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>

VINRARUS · #3 (**permalink**) 11.11.2013, 18:33

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

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

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

animhotep · #4 (**permalink**) 11.11.2013, 18:50

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

рони · #5 (**permalink**) 11.11.2013, 19:09

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

<!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>

ruslan_mart · #6 (**permalink**) 11.11.2013, 19:22

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

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

VINRARUS · #7 (**permalink**) 11.11.2013, 19:31

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

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

Не, так запросто можно забыть начальную ориентацию.

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

Форум

Справочник

Discord чат

Курсы javascript