<!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>JS 实现兼容IE图片向左或向右翻转
原文地址：https://www.cnblogs.com/minozMin/p/9857247.html