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

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