js实现按钮控制图片360度翻转特效的方法
本文实例讲述了js实现按钮控制图片360度翻转特效的方法。分享给大家供大家参考。具体实现方法如下:
<html> <title>js实现按钮控制图片360度翻转特效</title> <body> <scriptlanguage="javascript"> varisIE=(document.uniqueID)?1:0; vari=1; functionrotate(image) { varobject=image.parentNode; if(isIE){ image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")"; i++; if(i>4){i=1}; } else{ try{ varcanvas=document.createElement('canvas'); if(canvas.getContext("2d")){ object.replaceChild(canvas,image); varcontext=canvas.getContext("2d"); context.translate(176,0); context.rotate(Math.PI*0.5); context.drawImage(image,0,0); } }catch(e){} } } </script> <inputtype="button"value="点击旋转图片"onclick="rotate(document.getElementById('myimg'))"/><br/> <imgid="myimg"src="/images/m03.jpg"/> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。