單擊按鈕停止啟動功能

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/