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 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
ext for eclipse插件安装方法
Apr 27 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
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
php的ZipArchive类用法实例
2014/10/20 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
python发腾讯微博代码分享
2014/01/10 Python
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
python获取list下标及其值的简单方法
2016/09/12 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
Python: 传递列表副本方式
2019/12/19 Python
python实现简单飞行棋
2020/02/06 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
幼儿园评语大全
2014/04/17 职场文书
党员自我对照检查材料
2014/08/19 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
2015年党员自评材料
2014/12/17 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
打架检讨书范文
2015/01/27 职场文书
2015年个人思想总结
2015/03/09 职场文书
检察院起诉书
2015/05/20 职场文书
2016寒假假期总结
2015/10/10 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android