javascript - 使用 jquery 进行文本旋转

Question

您好，我目前正在使用 jquery 编写文本旋转代码，

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
};

$('.resizeButton').click(function() {
    rotation += 5;
    $('.new-div').rotate(rotation);
});

请看这个。 https://jsfiddle.net/felixtm/2mpjkxad/3/

但是这里的文本旋转发生在鼠标点击那个调整大小按钮时。而不是鼠标单击用户能够像往常一样旋转文本旋转事件。 IE。使用单击按钮按他的意愿旋转它。这里他需要点击很多次才能进行一次大的旋转。怎么办？

UPDATE : I see this question that is exactly what i wanted .But i don't know how to implement it . jQuery: Detecting pressed mouse button during mousemove event

Answer 1

尝试这样的事情:

var rotation = 0;

jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
};

$('.resizeButton').on("mousedown", function(e) {
    var startX = e.pageX;
    $(document).mousemove(function(e){
        rotation = startX - e.pageX;
        $('.new-div').rotate(rotation);
    });  
});
$('.resizeButton').on("mouseup", function(){
    $(document).unbind( "mousemove" );
});

https://jsfiddle.net/p9wtmfhp/