JS图片img旋转、放大、缩小

HTML代码：

<div id="outerdiv">
  <div>
      <img id="bigimg" src="" />
  </div>
</div>

JS代码：

<script>
$(function(){
    $('#uploadImagefileLists').on('click', '.imgWrap img', function(){
        $('#outerdiv').unbind("click");
        $('#outerdiv').append(
            '<div id="imgButtons" style="padding-top:5px;">'
                +'<input type="button" value="放大" οnclick="imgToSize(50)"> '
                +'<input type="button" value="缩小" οnclick="imgToSize(-50)"> '
                +'<input type="button" value="向左旋转45°" id="rotLeft" οnclick="imgRotateLeft()"> '
                +'<input type="button" value="向右旋转45°" id="rotRight" οnclick="imgRotateRight()"> '
                +'<input type="button" value="关闭" οnclick="closeOuterdivView()">'                
            +'</div>');
    });
});

var size = 0;
//放大缩小图片
function imgToSize(size) {
    var img = $("#bigimg");
    var oWidth = img.width(); //取得图片的实际宽度
    var oHeight = img.height(); //取得图片的实际高度
    img.width(oWidth + size);
    img.height(oHeight + size / oWidth * oHeight);
};

var r = 0;
//向左旋转
function imgRotateLeft() {
    var img = $("#bigimg");
    r -= 45;
    img.css('transform', 'rotate(' + r + 'deg)');
};

//向右旋转
function imgRotateRight() {
    var img = $("#bigimg");
    r += 45;
    img.css('transform', 'rotate(' + r + 'deg)');
};

//关闭图片预览div层--outerdiv
function closeOuterdivView(){
    $("#outerdiv").fadeOut("fast");
    $("#bigimg").css('width', 'auto');
    $("#bigimg").css('height', 'auto');
    $("#bigimg").css('transform', 'rotate(' + 0 + 'deg)');
    $("#imgButtons").remove();
}
</script>

效果图：