连续旋转图像点击按钮

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

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

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