У меня есть такой скрипт:
<style>
#rotate {
width: 200px;
height: 200px;
margin: 50px auto;
background: linear-gradient(0deg, red, green);
}
.active {
border-radius: 100%;
}
</style>
<div id="rotate"></div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
(function() {
var init, rotate, start, stop,
active = false,
angle = 0,
rotation = 0,
startAngle = 0,
center = {
x: 0,
y: 0
},
R2D = 180 / Math.PI,
rot = document.getElementById('rotate');
init = function() {
rot.addEventListener("mousedown", start, false);
$(document).bind('mousemove', function(event) {
if (active === true) {
event.preventDefault();
rotate(event);
}
});
$(document).bind('mouseup', function(event) {
event.preventDefault();
stop(event);
});
};
start = function(e) {
e.preventDefault();
var bb = this.getBoundingClientRect(),
t = bb.top,
l = bb.left,
h = bb.height,
w = bb.width,
x, y;
center = {
x: l + (w / 2),
y: t + (h / 2)
};
x = e.clientX - center.x;
y = e.clientY - center.y;
startAngle = R2D * Math.atan2(y, x);
return active = true;
};
rotate = function(e) {
e.preventDefault();
var x = e.clientX - center.x,
y = e.clientY - center.y,
d = R2D * Math.atan2(y, x);
rotation = d - startAngle;
return rot.style.webkitTransform = "rotate(" + (angle + rotation) + "deg)";
};
stop = function() {
angle += rotation;
alert(angle);
return active = false;
};
init();
}).call(this);
</script>
С помощью него я мышкой поворачиваю элемент.
Помогите, пожалуйста, сделать следующее. Мне нужно, чтобы я мог повернуть элемент только на 180deg. При этом:
- Если начинаешь поворачивать, и если повернул меньше, чем на 90deg и отпустил элемент, то он возвращается на место;
- Если начинаешь поворачивать, и если повернул больше, чем на 90deg и отпустил элемент, то он поворачивается до конца (до 180deg). В этом случае элементу добавляется дополнительный класс (.active). И сразу после этого ближайшие, скажем 60сек, элемент поворачивать мы не можем. А спустя 60сек этот дополнительный класс удаляется, и мы снова можем поворачивать элемент.
Как можно такое сделать, прошу помощи. Спасибо!
