javascript - 单击按钮连续旋转图像

Question

为了显示图像，我使用了 colorbox..因为我添加了 rotate-left 和 rotate-right 来旋转图像.. 代码是:

var rotate_right = document.getElementById('cboxRight');
$(rotate_right).on('click', function () {
    var cboxphoto = document.getElementsByClassName('cboxPhoto')[0].style;
    cboxphoto.setAttribute('-ms-transform', 'rotate(90deg)');
});

var rotate_left = document.getElementById('cboxLeft');
$(rotate_left).on('click', function () {
    var cboxphoto = document.getElementsByClassName('cboxPhoto')[0].style;
    cboxphoto.setAttribute('-ms-transform', 'rotate(270deg)');
});

如果我再次点击 rightrotate 按钮，它会旋转 90 度然后它不会工作..我想在点击按钮时再次旋转它

Answer 1

您只能旋转 90 或 270 度。当您再次单击时，它不会移动，因为它已经旋转到该 Angular 。

改为跟踪当前旋转并将属性设置为正负 90 度的值 - 您可能也可以稍微清理一下代码，但像这样的 fiddle :http://jsfiddle.net/w6ho689e/

    var degrees = 0;
$("#cboxRight").on('click', function () {
    var $cboxphoto = $('.cboxPhoto');
    degrees += 90;
    $cboxphoto.css('-ms-transform', 'rotate(' + degrees + 'deg)');
    $cboxphoto.css('-webkit-transform', 'rotate(' + degrees + 'deg)');
    $cboxphoto.css('transform', 'rotate(' + degrees + 'deg)');
});

$("#cboxLeft").on('click', function () {
    var $cboxphoto = $('.cboxPhoto');
    degrees -= 90;
    $cboxphoto.css('-ms-transform', 'rotate(' + degrees + 'deg)');
    $cboxphoto.css('-webkit-transform', 'rotate(' + degrees + 'deg)');
    $cboxphoto.css('transform', 'rotate(' + degrees + 'deg)');
});