按钮

Question

显示Image我使用了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度。再次单击时，它不会移动，因为它已经旋转到该角度。

改为跟踪当前的旋转并将属性设置为该值加上或减去90deg - 您可以稍微清理一下代码，但是这样的小提琴：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)');
});