旋转图像后显示原始图像而不是旋转图像

时间:2015-05-18 05:45:12

标签: jquery image rotation

我想在点击左右按钮后显示旋转图像 但是显示原始图像并在清除历史记录和缓存后它将显示旋转图像

    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)');
                $cboxphoto.css('-o-transform', 'rotate(' + degrees + 'deg)');
                $cboxphoto.css('-moz-transform', 'rotate(' + degrees + 'deg)');
saveRotateImage(this.id, tr_job_room_id, new_path_colorbox);
            });

            $("#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)');
                $cboxphoto.css('-o-transform', 'rotate(' + degrees + 'deg)');
                $cboxphoto.css('-moz-transform', 'rotate(' + degrees + 'deg)');
saveRotateImage(this.id, tr_job_room_id, new_path_colorbox);
            });
    function saveRotateImage(cboxid, ids, path) {
        $.ajax(
        {
            type: "POST",
            url: '@Url.Action("saveRotateImage")',
            dataType: "json",
            mtype: "post",
            data: { cbox_id: cboxid, ids: ids, path: path },
            cache: false,
            async: true,
            success: function (data) {
                //alert("Saved");
            }
        });
    }

如何在点击按钮

上显示旋转图像

1 个答案:

答案 0 :(得分:0)

可能是这样的......

JS小提琴链接:http://jsfiddle.net/vreverpb/2/

$("input[name='toggle']").change(function(){

var degrees = this.value;


        var $cboxphoto = $('.cboxPhoto');
        $cboxphoto.css('-ms-transform', 'rotate(' + degrees + 'deg)');
        $cboxphoto.css('-webkit-transform', 'rotate(' + degrees + 'deg)');
        $cboxphoto.css('transform', 'rotate(' + degrees + 'deg)');
        $cboxphoto.css('-o-transform', 'rotate(' + degrees + 'deg)');
        $cboxphoto.css('-moz-transform', 'rotate(' + degrees + 'deg)');



    });