Home > Developer > JavaScript
Js Implementation of button control image 360-degree flip effect method, js360-degree
This article describes how to implement the 360-degree flip Effect of button-controlled images in js. Share it with you for your reference. The specific implementation method is as follows:
Copy codeThe Code is as follows: <Title> js-implemented button-controlled image 360-degree flip effect </title>
<Body>
<Script language = "javascript">
Var isIE = (document. uniqueID )? 1:0;
Var I = 1;
Function rotate (image)
{
Var object = image. parentNode;
If (isIE ){
Image. style. filter = "progid: dXImagetransform. Microsoft. basicImage (rotation =" + I + ")";
I ++;
If (I> 4) {I = 1 };
}
Else {
Try {
Var canvas = document. createElement ('canvas ');
If (canvas. getContext ("2d ")){
Object. replaceChild (canvas, image );
Var context = canvas. getContext ("2d ");
Context. translate (176, 0 );
Context. rotate (Math. PI * 0.5 );
Context. drawImage (image, 0, 0 );
}
} Catch (e ){}
}
}
</Script>
<Input type = "button" value = "click to rotate the image" onclick = "rotate (document. getElementById ('myimg ')"/> <br/>
</Body>
</Html>
I hope this article will help you design javascript programs.
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
