按钮单击停止启动功能

Question

我有在另一个div内旋转div的功能。如何在按钮单击时启动和停止旋转div。一个按钮开始旋转另一个停止它。有没有办法只在我向右或向左滑动滑块而不是像现在鼠标移动时旋转div？请帮忙。旋转div的功能：

var img = $(".inner");

if (img.length > 0) {
  var offset = img.offset();

  function mouse(evt) {
    var center_x = (offset.left) + (img.width() / 2);
    var center_y = (offset.top) + (img.height() / 2);
    var mouse_x = evt.pageX;
    var mouse_y = evt.pageY;
    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
    var degree = (radians * (180 / Math.PI) * -1) + 90;
    img.css('-moz-transform', 'rotate(' + degree + 'deg)');
    img.css('-webkit-transform', 'rotate(' + degree + 'deg)');
    img.css('-o-transform', 'rotate(' + degree + 'deg)');
    img.css('-ms-transform', 'rotate(' + degree + 'deg)');
  }
  $(".inner").mousemove(mouse);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner" style="width:100px; height:100px; background-color:black; display:block; ">

Answer 1

您可以设置class来检测是否点击了img：

自助点击版本：

＆＃13;

＆＃13;

var img = $(".inner");
var offset = img.offset();

function mouse(evt) {
  var center_x = (offset.left) + (img.width() / 2);
  var center_y = (offset.top) + (img.height() / 2);
  var mouse_x = evt.pageX;
  var mouse_y = evt.pageY;
  var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
  var degree = (radians * (180 / Math.PI) * -1) + 90;
  img.css('-moz-transform', 'rotate(' + degree + 'deg)');
  img.css('-webkit-transform', 'rotate(' + degree + 'deg)');
  img.css('-o-transform', 'rotate(' + degree + 'deg)');
  img.css('-ms-transform', 'rotate(' + degree + 'deg)');
}

img.on('click', function(e) {

  $(this).toggleClass('clicked');

});

img.on('mousemove', function(evt) {
  if (!img.hasClass('clicked')) {
    mouse(evt);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner" style="width:100px; height:100px; background-color:black; display:block; ">

＆＃13;

＆＃13;

＆＃13;

按钮点击版本：

＆＃13;

＆＃13;

var img = $(".inner");
var offset = img.offset();

function mouse(evt) {
  var center_x = (offset.left) + (img.width() / 2);
  var center_y = (offset.top) + (img.height() / 2);
  var mouse_x = evt.pageX;
  var mouse_y = evt.pageY;
  var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
  var degree = (radians * (180 / Math.PI) * -1) + 90;
  img.css('-moz-transform', 'rotate(' + degree + 'deg)');
  img.css('-webkit-transform', 'rotate(' + degree + 'deg)');
  img.css('-o-transform', 'rotate(' + degree + 'deg)');
  img.css('-ms-transform', 'rotate(' + degree + 'deg)');
}

$('#Stop').on('click', function(e) {
  img.addClass('clicked');
});

$('#Start').on('click', function(e) {
  img.removeClass('clicked');
});

img.on('mousemove', function(evt) {
  if (!img.hasClass('clicked')) {
    mouse(evt);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner clicked" style="width:100px; height:100px; background-color:black; display:block; ">
</div>
<button id="Start">Start</button>
<button id="Stop">Stop</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用Jquery，您可以使用：

$('selector').on('click', function(){

}

要旋转，您可以使用Jquery动画： http://api.jquery.com/animate/