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


Posted in Javascript onFebruary 17, 2015

本文实例讲述了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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
js url传值中文乱码之解决之道
Nov 20 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
详解Layer弹出层样式
Aug 21 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 #Javascript
js鼠标滑过图片震动特效的方法
Feb 17 #Javascript
js实现双击图片放大单击缩小的方法
Feb 17 #Javascript
js图片模糊切换显示特效的方法
Feb 17 #Javascript
js实现单击图片放大图片的方法
Feb 17 #Javascript
js实现iframe自动自适应高度的方法
Feb 17 #Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 #Javascript
You might like
我的论坛源代码(六)
2006/10/09 PHP
PHP编程风格规范分享
2014/01/15 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
Python Tkinter基础控件用法
2014/09/03 Python
python将图片文件转换成base64编码的方法
2015/03/14 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
python实现单机五子棋
2020/08/28 Python
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
linux面试题参考答案(9)
2016/01/29 面试题
校园活动策划方案
2014/06/13 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
个人职业及收入证明
2014/10/13 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers
Java实现简单小画板
2022/06/10 Java/Android
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技