我正在看这个例子 ( jsfiddle )。这几乎是我所需要的,但我需要用户用鼠标“捕获”轮盘赌,然后旋转它,就像您用手转动真正的轮盘赌一样。
例如,您单击并按住滚轮,它“粘”在您的鼠标上,然后您向左或向右移动鼠标,然后松开按钮,滚轮开始旋转直到停止。
另一个问题是,即使用户这样做了,我是否可以选择一个预先确定的轮停顺序?
这是 jsFiddle:
$(function(){
var overWheel = false;
var mouseDown = false;
var lastMousePos = 0;
$('.wheel').on('mouseover', function(){
overWheel = true;
}).on('mouseout', function(){
overWheel = false;
});
$(document).on('mousedown', function(e){
if(overWheel){
lastMousePos = e.offsetY;
mouseDown = true;
}
}).on('mouseup', function(){
mouseDown = false;
});
$(document).on('mousemove', function(e){
if(overWheel && mouseDown){
handleWheel(e);
}
});
function handleWheel(e) {
var yPos = e.offsetY;
var direction = 0;
var deg = getRotationDegrees($('.wheel'));
if(yPos < lastMousePos){ // mouse is going up, move against the clock
console.log(yPos);
direction = -2;
} else { //mouse is going down, move with the clock
direction = 2;
}
$('.wheel').css({'-webkit-transform': 'rotate(' + (deg + (direction)) + 'deg)'});
}
function getRotationDegrees(obj){
var matrix = obj.css("-webkit-transform");
if(matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
} else { var angle = 0; }
return angle;
}
});
最佳答案
我已经成功地工作了。 我用了 jQuery Rotate图书馆。
谢谢!
关于javascript - 用鼠标旋转轮盘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13142004/