JS 控制图片旋转

以下为JS控制图片翻转代码,兼容firefox,ie,chrome等浏览器

  
  
  
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <title>图片旋转效果</title> 
  5. <meta http-equiv="content-type" content="text/html;charset=gb2312"> 
  6. <!--把下面代码加到<head>与</head>之间--> 
  7. <style type="text/css"> 
  8. ul{padding:0 15px;} 
  9. ul li{padding-bottom:15px;border-bottom:1px dashed #EEE;} 
  10. .caption{padding:15px 0 5px;} 
  11. .caption input{margin-right:10px;padding:0 10px;} 
  12. </style> 
  13. <script type="text/javascript"> 
  14. /* 
  15. * www.byzuo.com 
  16. * ok!: MSIE 6, 7, 8, Firefox 3.6, chrome 4, Safari 4, Opera 10 
  17. * o 旋转图片ID; 
  18. * p 选择旋转方向,固定值为'left'或'right'; 
  19. */ 
  20. function rotate(o,p){ 
  21.     var img = document.getElementById(o); 
  22.     if(!img || !p) return false; 
  23.     var n = img.getAttribute('step'); 
  24.     if(n== null) n=0
  25.     if(p=='right'){ 
  26.         (n==3)? n=0:n++; 
  27.     }else if(p=='left'){ 
  28.         (n==0)? n=3:n--; 
  29.     } 
  30.     img.setAttribute('step',n); 
  31.     //MSIE 
  32.     if(document.all) { 
  33.         img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')'; 
  34.         //HACK FOR MSIE 8 
  35.         switch(n){ 
  36.             case 0: 
  37.                 imgimg.parentNode.style.height = img.height; 
  38.                 break; 
  39.             case 1: 
  40.                 imgimg.parentNode.style.height = img.width; 
  41.                 break; 
  42.             case 2: 
  43.                 imgimg.parentNode.style.height = img.height; 
  44.                 break; 
  45.             case 3: 
  46.                 imgimg.parentNode.style.height = img.width; 
  47.                 break; 
  48.         } 
  49.     //DOM 
  50.     }else{ 
  51.         var c = document.getElementById('canvas_'+o); 
  52.         if(c== null){ 
  53.             img.style.visibility = 'hidden'
  54.             img.style.position = 'absolute'
  55.             c = document.createElement('canvas'); 
  56.             c.setAttribute("id",'canvas_'+o); 
  57.             img.parentNode.appendChild(c); 
  58.         } 
  59.         var ccanvasContext = c.getContext('2d'); 
  60.         switch(n) { 
  61.             default : 
  62.             case 0 : 
  63.                 c.setAttribute('width', img.width); 
  64.                 c.setAttribute('height', img.height); 
  65.                 canvasContext.rotate(0 * Math.PI / 180); 
  66.                 canvasContext.drawImage(img, 0, 0); 
  67.                 break; 
  68.             case 1 : 
  69.                 c.setAttribute('width', img.height); 
  70.                 c.setAttribute('height', img.width); 
  71.                 canvasContext.rotate(90 * Math.PI / 180); 
  72.                 canvasContext.drawImage(img, 0, -img.height); 
  73.                 break; 
  74.             case 2 : 
  75.                 c.setAttribute('width', img.width); 
  76.                 c.setAttribute('height', img.height); 
  77.                 canvasContext.rotate(180 * Math.PI / 180); 
  78.                 canvasContext.drawImage(img, -img.width, -img.height); 
  79.                 break; 
  80.             case 3 : 
  81.                 c.setAttribute('width', img.height); 
  82.                 c.setAttribute('height', img.width); 
  83.                 canvasContext.rotate(270 * Math.PI / 180); 
  84.                 canvasContext.drawImage(img, -img.width, 0); 
  85.                 break; 
  86.         } 
  87.     } 
  88. </script> 
  89. </head> 
  90. <body> 
  91. <!--把下面代码加到<body>与</body>之间--> 
  92. <ul class="clearfix"> 
  93.     <li> 
  94.         <div class="caption"> 
  95.             <input type="button" value="turn left" onclick="rotate('pic_1','left')"> 
  96.             <input type="button" value="turn right" onclick="rotate('pic_1','right')"> 
  97.         </div> 
  98.         <div class="cont"> 
  99.             <img  alt="javascript 图片旋转效果"  id="pic_1" src="1.gif" alt=""> 
  100.         </div> 
  101.     </li> 
  102. </ul> 
  103. </body> 
  104. </html> 

 

你可能感兴趣的:(js,职场,休闲,控制图片旋转)