图片旋转特效，JS实现图片左右方向旋转代码

发布时间：2018-08-19 12:28:01 所属栏目：Asp教程来源：站长网

导读：Java Script仿微博中的图片旋转特效，图片旋转特效，JS实现图片左右方向旋转代码，可以向左转、向右转，看了sina微薄的图片向左向右旋转效果心痒痒，于是仿照着做了一个，嘿嘿，效果不是太好，图片被拉伸的不像样子了，大家自己换成合适的就可以了。示例

　　JavaScript仿微博中的图片旋转特效，图片旋转特效，JS实现图片左右方向旋转代码，可以向左转、向右转，看了sina微薄的图片向左向右旋转效果心痒痒，于是仿照着做了一个，嘿嘿，效果不是太好，图片被拉伸的不像样子了，大家自己换成合适的就可以了。

　　示例：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>图片旋转，向左转，向左转</title> <style type="text/css"> *{margin:0;padding:0;} .item{float:left;border:5px solid #00469d;width:600px;} </style> </head> <body> <div class="item"> <input type="button" value="left" /><input type="button" value="right" /><br /> <img src="/uploads/common/images/p4.jpg" width="317" height="521" /> </div> <div class="item"> <input type="button" value="left" /><input type="button" value="right" /><br /> <img src="/uploads/common/images/p3.jpg" width="422" height="600" /> </div> <div class="item"> <input type="button" value="left" /><input type="button" value="right" /><br /> <img src="/uploads/common/images/p2.jpg" width="382" height="487" /> </div> <div class="item"> <input type="button" value="left" /><input type="button" value="right" /><br /> <img src="/uploads/common/images/p1.jpg" width="591" height="720" /> </div> <script type="text/javascript"> function Rotate(img){ this.init(img); } Rotate.prototype = { constructor : Rotate, init : function(img){ this.img = img; this.initWidth = this.img.width; this.initHeight = this.img.height; if(!document.all || window.opera){ var canvas = document.createElement("canvas"); this.ctx = canvas.getContext('2d'); canvas.setAttribute("width", this.img.width); canvas.setAttribute("height", this.img.height); this.ctx.drawImage(this.img,0,0); this.ghost = this.img; this.img.parentNode.replaceChild(canvas,this.img); this.img = canvas; } this.direction = 0; }, run : function(){ if(document.all && !window.opera){ this.img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(Rotation=' + this.direction + ')'; var rate = this.initWidth / this.initHeight; if(this.direction % 2 != 0){ this.img.width = Math.min(rate * this.initWidth , this.initWidth); this.img.height = this.initWidth; }else{ this.img.width = this.initWidth; this.img.height = this.initHeight; } }else{ var w = h = dx = dy = a = 0; switch (this.direction){ case 0: w = this.ghost.width; h = this.ghost.height; dx = 0; dy = 0; a = 0; break; case 1: w = this.ghost.height; h = this.ghost.width; dx = 0; dy = - this.ghost.height; a = 90 * Math.PI / 180; break; case 2: w = this.ghost.width; h = this.ghost.height; dx = - this.ghost.width; dy = - this.ghost.height; a = 180 * Math.PI / 180; break; case 3: w = this.ghost.height; h = this.ghost.width; dx = - this.ghost.width; dy = 0; a = 270 * Math.PI / 180; break; } console.log(this.direction); this.img.setAttribute('width', w); this.img.setAttribute('height', h); this.ctx.rotate(a); this.ctx.drawImage(this.ghost, dx, dy); if(this.direction === 1 || this.direction === 3 ){ this.img.style.width = Math.min(this.ghost.width, this.initHeight) + "px"; } } }, runLeft : function(){ this.direction--; if(this.direction < 0){ this.direction = 3; } if(this.direction >= 4){ this.direction = 0; } this.run(); }, runRight : function(){ this.direction++; if(this.direction < 0){ this.direction = 3; } if(this.direction > 3){ this.direction = 0; } this.run(); } }; function init(divs){ for(var i = 0, len = divs.length; i < len; i++){ (function(o){ var left = o.getElementsByTagName("input")[0], right = o.getElementsByTagName("input")[1], img = o.getElementsByTagName("img")[0], rotate = new Rotate(img); left.onclick = function(){ rotate.runLeft(); }; right.onclick = function(){ rotate.runRight(); } })(divs[i]); } } window.onload = function(){ init(document.getElementsByTagName("div")); } </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：淮安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!