js 照片滴旋_parentnode.style.height-优快云博客

本文链接：https://blog.youkuaiyun.com/aijjdeys/article/details/5860586

照片滴旋

要看原文去耦QQ空间哦：http://410246567.qzone.qq.com/

/*旋转图片******************************************
* p 选择旋转方向,固定值为'left'或'right';
*/
function rotate(p){
var img = document.getElementById('zoomimg');
var zoomimglayer=document.getElementById('zoomimglayer');
document.getElementById('zoomimgbox').style.textAlign='left';
if(!img || !p) return false;
var n = img.getAttribute('step');
if(n== null) n=0;
if(p=='left'){
(n==3)? n=0:n++;
}else if(p=='right'){
(n==0)? n=3:n--;
}
img.setAttribute('step',n);
//alert(n)
//IE

if(document.all) {
  img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';
  //HACK FOR MSIE 8
  switch(n){
   case 0:
    img.parentNode.style.height = img.height;
    zoomimglayer.style.width=(img.width+20)+"px";
    img.parentNode.style.width=img.width;
    break;
   case 1:
    img.parentNode.style.height = img.width;
    zoomimglayer.style.width=(img.height+20)+"px";
    img.parentNode.style.width=img.height;
    break;
   case 2:
    img.parentNode.style.height = img.height;
    zoomimglayer.style.width=(img.width+20)+"px";
    img.parentNode.style.width=img.width;
    break;
   case 3:
    img.parentNode.style.height = img.width;
    zoomimglayer.style.width=(img.height+20)+"px";
    img.parentNode.style.width=img.height;
    break;
  }

//DOM
}else{
  var c = document.getElementById('canvas_'+o);
  if(c== null){
   img.style.visibility = 'hidden';
   img.style.position = 'absolute';
   c = document.createElement('canvas');
   c.setAttribute("id",'canvas_'+o);
   img.parentNode.appendChild(c);
  }
  var canvasContext = c.getContext('2d');
  switch(n) {
   default :
   case 0 :
    c.setAttribute('width', img.width);
    c.setAttribute('height', img.height);
    canvasContext.rotate(0 * Math.PI / 180);
    canvasContext.drawImage(img, 0, 0,img.width,img.height);
    zoomimglayer.style.width=(img.width+20)+"px";
    break;
   case 1 :
    c.setAttribute('width', img.height);
    c.setAttribute('height', img.width);
    canvasContext.rotate(90 * Math.PI / 180);
    canvasContext.drawImage(img, 0, -img.height,img.width,img.height);
    zoomimglayer.style.width=(img.height+20)+"px";
    break;
   case 2 :
    c.setAttribute('width', img.width);
    c.setAttribute('height', img.height);
    canvasContext.rotate(180 * Math.PI / 180);
    canvasContext.drawImage(img, -img.width, -img.height,img.width,img.height);
    zoomimglayer.style.width=(img.width+20)+"px";
    break;
   case 3 :
    c.setAttribute('width', img.height);
    c.setAttribute('height', img.width);
    canvasContext.rotate(270 * Math.PI / 180);
    canvasContext.drawImage(img, -img.width, 0,img.width,img.height);
    zoomimglayer.style.width=(img.height+20)+"px";
    break;
  };
}
}