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

 更新时间:2015年02月17日 15:28:05   作者:代码家园  
这篇文章主要介绍了js实现按钮控制图片360度翻转特效的方法,涉及HTML5中canvas方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • javascript下利用数组缓存正则表达式的实现方法

    javascript下利用数组缓存正则表达式的实现方法

    利用组存大法要提高我们程序的性能,让我们的正则表达式的创建于执行更有效率。
    2009-12-12
  • javascript EXCEL 操作类代码

    javascript EXCEL 操作类代码

    有空把JAVASCRIPT对EXCEL的操作进行了封装,大家可以根据自己实际的需要在此基础上进行扩充。详细的请看代码
    2009-07-07
  • JS鼠标滚动分页效果示例

    JS鼠标滚动分页效果示例

    在开发的时候为什么左边的数据出来比右边的慢呢?因为这里没有进行分页,左边的数据多,所以查询相对较慢。怎么解决此问题呢?下面小编给大家带来了JS鼠标滚动分页效果示例,需要的的朋友参考下吧
    2017-07-07
  • 详解webpack自定义loader初探

    详解webpack自定义loader初探

    这篇文章主要介绍了webpack自定义loader初探,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • JS实现类似51job上的地区选择效果示例

    JS实现类似51job上的地区选择效果示例

    这篇文章主要介绍了JS实现类似51job上的地区选择效果,结合完整实例形式分析了javascript基于鼠标事件响应实现页面元素动态变换的相关操作技巧,需要的朋友可以参考下
    2016-11-11
  • fmt:formatDate的输出格式详解

    fmt:formatDate的输出格式详解

    本篇文章主要是对fmt:formatDate的输出格式进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 详解react使用react-bootstrap当轮子造车

    详解react使用react-bootstrap当轮子造车

    本篇文章主要介绍了详解react使用react-bootstrap当轮子造车,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-08-08
  • 微信小程序iOS下拉白屏晃动问题解决方案

    微信小程序iOS下拉白屏晃动问题解决方案

    这篇文章主要介绍了微信小程序iOS下拉白屏晃动问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • javascript实现鼠标选取拖动或Ctrl选取拖动

    javascript实现鼠标选取拖动或Ctrl选取拖动

    javascript实现鼠标选取拖动或Ctrl选取拖动...
    2007-06-06
  • Three.js快速入门教程

    Three.js快速入门教程

    这篇文章主要为大家详细介绍了Three.js快速入门教程,帮助大家快速入门,感兴趣的小伙伴们可以参考一下
    2016-09-09

最新评论