我有在另一个 div 中旋转 div 的功能。我如何在单击按钮时开始和停止旋转 div。一个按钮开始旋转另一个停止它。有没有办法只在我向右或向左滑动 slider 时才旋转 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; ">
最佳答案
你可以设置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>
关于javascript - 单击按钮停止启动功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47528209/