单击按钮停止启动功能

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是否已单击：

自行点击版本：

 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> 

Answer 2

使用Jquery可以使用：

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

}

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