<!DOCTYPE HTML> <head> <title>JS实现图片向左向右翻转</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <script type="text/javascript"> function rotate(o, p) { var img = document.geiElmentById(o); if(!img || !p) return false; var n = img.getAttribute('step'); if(n === null) n = 0; if(p === 'right') { (n === 3) ? n = 0 : n++; } else if(p === 'left') { (n === 0) ? n = 3 : n--; } img.setAttribute('step', n); // MSIE if(document.all) { img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + n +')'; switch(n) { case 0: img.parentNode.style.height = img.height; break; case 1: img.parentNode.style.height = img.width; break; case 2: img.parentNode.style.height = img.height; break; case 3: img.parentNode.style.height = img.width; break; } } 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 canvasContent = c.getContext('2d'); switch(n) { default: case 0: c.setAttribute('width', img.width); c.setAttribute('height', img.height); canvasContent.rotate(0 * Math.PI / 180); canvasContent.drawImage(img, 0, 0); break; case 1: c.setAttribute('width', img.width); c.setAttribute('height', img.height); canvasContent.rotate(90 * Math.PI / 180); canvasContent.drawImage(img, 0, -img.height); break; case 2: c.setAttribute('width', img.width); c.setAttribute('height', img.height); canvasContent.rotate(180 * Math.PI / 180); canvasContent.drawImage(img, -img.width, -img.height); break; case 3: c.setAttribute('width', img.width); c.setAttribute('height', img.height); canvasContent.rotate(270 * Math.PI / 180); canvasContent.drawImage(img, -img.width, 0); break; } } } </script> </head> <body> <div class="container"> <input type="button" value="turn left" onclick="rotate('pic', 'left')" /> <input type="button" value="turn right" onclick="rotate('pic', 'right')" /> <div class="cont" onclick="rotate('pic', 'right')"> <img id="pic" src="1.jpg" alt="" /> </div> </div> </body> </html>