CSS+JS實現圖片無縮放旋轉
阿新 • • 發佈：2018-12-26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title>CSS+JS實現圖片旋轉</title> <style type="text/css"> .content {position:relative;text-align:center;} .rotation {position:absolute;bottom:-50px;left:50%;margin-left:-45px;width:90px;height:22px;cursor:pointer;display:block;} </style> <script type="text/javascript"> <!-- var isIE = /*@[email protected]*/!1; function rotationPicture(img){ if (!img) return; this._img = typeof img == 'string'?document.getElementById(img):img; this.r = 1; this.addBtn(); this.bind(); } rotationPicture.prototype.addBtn = function(){ this._rRight = document.createElement('input'); this._rRight.setAttribute('id','rRight'); this._rRight.setAttribute('type','button'); this._rRight.setAttribute('value','旋轉'); this._rRight.className = 'rotation'; if (!isIE){ var canvas = document.createElement('CANVAS'); var ctx = canvas.getContext('2d'); canvas.setAttribute('width',this._img.width); canvas.setAttribute('height',this._img.height); ctx.drawImage(this._img,0,0); this._ghost = this._img; this._img.parentNode.replaceChild(canvas,this._img); this._img = canvas; } this._img.parentNode.insertBefore(this._rRight,this._img); }; rotationPicture.prototype.bind = function(){ var _this = this; if (window.attachEvent){ this._rRight.attachEvent('onclick',rotation); }else{ this._rRight.addEventListener('click',rotation,false); } function rotation(){ if (_this.r > 3) _this.r = 0; if(isIE){ _this._img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(Rotation=' + _this.r + ')'; }else{ var ctx = _this._img.getContext('2d'); switch (_this.r){ case 0: _this._img.setAttribute('width',_this._ghost.width); _this._img.setAttribute('height',_this._ghost.height); ctx.drawImage(_this._ghost,0,0); break; case 1: _this._img.setAttribute('width',_this._ghost.height); _this._img.setAttribute('height',_this._ghost.width); ctx.rotate(90*Math.PI/180); ctx.drawImage(_this._ghost,0,-_this._ghost.height); break; case 2: _this._img.setAttribute('width',_this._ghost.width); _this._img.setAttribute('height',_this._ghost.height); ctx.rotate(180*Math.PI/180); ctx.drawImage(_this._ghost,-_this._ghost.width,-_this._ghost.height); break; case 3: _this._img.setAttribute('width',_this._ghost.height); _this._img.setAttribute('height',_this._ghost.width); ctx.rotate(270*Math.PI/180); ctx.drawImage(_this._ghost,-_this._ghost.width,0); break; } } _this.r++; } }; //開啟呼叫函式 window.onload = function(){ var ir = new rotationPicture('pic_xz'); }; --> </script> </head> <body> <div id="container"> <div class="content"> <img src="http://www.chenfahui.cn/ziliao/images/custom_hex.png" id="pic_xz" alt="順時針旋轉圖片" /> </div> </div> </body> </html>