手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js实现按钮控制图片360度翻转特效的方法
js实现按钮控制图片360度翻转特效的方法
摘要:本文实例讲述了js实现按钮控制图片360度翻转特效的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:js实现按钮控制图片36...

本文实例讲述了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="点击旋转图片" /><br />

<img id="myimg" src="http://www.jb51.netimages/m03.jpg"/>

</body>

</html>

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

【js实现按钮控制图片360度翻转特效的方法】相关文章:

js+html5绘制图片到canvas的方法

js实现精美的图片跟随鼠标效果实例

JQuery+CSS实现图片上放置按钮的方法

jquery实现图片左右切换的方法

js实现鼠标移到链接文字弹出一个提示层的方法

基于jQuery插件实现环形图标菜单旋转切换特效

JavaScript判断图片是否已经加载完毕的方法汇总

jQuery处理图片加载失败的常用方法

jQuery实现延迟跳转的方法

javascript实现行拖动的方法

精品推荐
分类导航