This article mainly introduces JS control picture Flip Sample code (compatible firefox,ie,chrome) needs of friends can come to the reference, I hope to help you.
Code as follows: <! 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> <title> picture rotation effect </ title> <meta http-equiv= "Content-type" content= "text/html;charset=gb2312" > <!--Add the following code to < Between Head> and </head>--> <style type= "Text/css" > ul{padding:0 15px;} UL li{padding-bottom:15px;border-bottom:1px dashed #EEE;} caption{padding:15px 0 5px;} Caption Input{margin-right:10px;padding:0 10px;} </style> <script type= "Text/javascript" > /* * www.byzuo.com * ok!: MSIE 6, 7, 8 , Firefox 3.6, Chrome 4, Safari 4, Opera 10 * o rotate picture id; * P Select rotation direction, fixed value is ' left ' or ' right '; */ function Rotate (o,p) { var img = document.getElementById (o); if (!img | |!p) return FALSE;&N Bsp var n = Img.getattribute (' step '); if (n== null) n=0; if (p== ' right ') { & nbsp (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 + ') '; //hack for MSIE 8 switch (n) { &NBS P Case 0: Imgimg.parentNode.style.height = Img.h eight; break; &NBSP ; Case 1: Imgimg.parentNode.style.height = img.width; &N BsP break; Case 2: &nbs P imgimg.parentNode.style.height = img.height; & nbsp break; case 3: &NBS P imgimg.parentNode.style.height = img.width; &N Bsp break; } //dom }else{ var c = document.getElementById (' canvas_ ' +o); if (c== null) { img.style.visibility = ' hidden '; Img.st yle.position = ' absolute '; C = document.createelement (' canvas '); &NB Sp C.setattribute ("id", ' canvas_ ' +o); IMG.P Arentnode.appendchild (c); } var ccanvascontext = C.get Context (' 2d '); switch (n) { default: &nbs P case 0: C.SETATTR Ibute (' width ', img.width); c.setattribute (' Height ', Img.hei ght); canvascontext.rotate (0 * math.pi/180); canvascontext.drawimage (img, 0, 0); &NB Sp break; Case 1: &NB Sp C.setattribute (' width ', img.height); C.setattribute ( ' Height ', img.width); Canvascontext.rotate (MATH.PI/18 0); canvascontext.drawimage (img, 0,-img.height); &nbs P break; Case 2: &NB Sp c.setattribute (' width ', img.width); &NB Sp C.setattribute (' height ', img.height); C Anvascontext.rotate (180 * math.pi/180); Canvascontext.draw Image (IMG,-img.width,-img.height); break; &NB Sp &NBSp Case 3: c.setattribute (' width ', img.height); nbsp c.setattribute (' height ', img.width); &N Bsp canvascontext.rotate (270 * math.pi/180); &NB Sp Canvascontext.drawimage (IMG,-img.width, 0); BREAK;&N Bsp } } } </script> </head> <body>& nbsp <!--Add the following code to <body> and </body>--> <ul class= "Clearfix" > <li> <div class= "caption" > <input t Ype= "button" value= "Turn Left" onclick= "rotate (' pic_1 ', ' left ')" > < InputType= "button" value= "Turn Right" onclick= "rotate (' pic_1 ', ' right ')" > </div>& nbsp <DIV class= "cont" > <img alt= "ja Vascript picture rotation effect " id=" Pic_1 "src=" 1.gif "alt=" "> </div> &NBS P </li> </ul> </body> </html> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
