按下按钮启动或停止功能

Question

按下按钮启动或停止功能

4

我有一个函数，可以旋转另一个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; ">

- Michael

一个按钮开始旋转，另一个按钮停止旋转。我不确定我理解了。您是指通过单击“右”或“左”按钮来旋转“内部”吗？ - Mosh Feu

你可以在DIV上切换类，并将旋转代码包装在一个if语句中，检查类的存在。 - user3154108

旋转是使用鼠标事件值（pageX，pageY）进行的，您希望单击事件执行什么操作？如果使用单击事件进行旋转，它将基于什么进行旋转？请您能否更清楚地解释所需行为，因为您提供的函数似乎完全不适合您所请求的内容。 - mthomp

我在这里为您制作了一个简单的示例jsfiddle.net/KAngel7/da3e5fLe/，希望它有所帮助！ - KAngel7

它现在的行为是旋转，但我需要在按钮点击时开始旋转并停止它。这意味着当我选择 div 中的图像并且该 div 没有旋转时，我可以在按钮点击后操作 div 的旋转，并在停止按钮上将 div 保持在 manipulation 结束时的状态，不能再旋转，再次启动按钮开始 div 的操作，在其所处的状态中停止 manipulation。希望我没有让你比一开始更困惑 :) - Michael

2个回答

0

使用Jquery，您可以使用以下内容：

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

}

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

- Björn C

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pedram · Accepted Answer

你可以设置 class 来检测是否已点击 img：

自身点击版本：

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);
  }
});

<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; ">

按钮点击版本：

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);
  }
});

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