js实现按钮控制图片360度翻转特效的方法

本文实例讲述了js实现按钮控制图片360度翻转特效的方法。分享给大家供大家参考。具体实现方法如下:

<html>

<title>js实现按钮控制图片360度翻转特效</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="点击旋转图片" onclick="rotate(document.getElementById('myimg'))" /><br />

<img id="myimg" src="/images/m03.jpg"/>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#nhooo.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。