单击按钮连续旋转图像

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)');
});

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

Answer 1

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

改为跟踪当前旋转并将属性设置为正负 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)');
});

单击按钮连续旋转图像

Continuous rotate image onclick of button

javascript

jquery

css

colorbox