编程 Javascript

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程序设计有所帮助。

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript版代码高亮

Jun 26 Javascript

如何实现浏览器上的右键菜单

Jul 10 Javascript

客户端脚本中常常出现的一些问题和调试技巧

Jan 09 Javascript

使用jquery局部刷新(jquery.load)从数据库取出数据

Jan 22 Javascript

JavaScript也谈内存优化

Jun 06 Javascript

使用jQuery和Bootstrap实现多层、自适应模态窗口

Dec 22 Javascript

避免jQuery名字冲突 noConflict()方法

Jul 30 Javascript

详解使用webpack构建多页面应用

Dec 21 Javascript

vue组件之间数据传递的方法实例分析

Feb 12 Javascript

微信小程序实现带参数的分享功能(两种方法)

May 17 Javascript

解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)

Jul 20 Javascript

Swiper实现导航栏滚动效果

Oct 16 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

作为程序员必知的16个最佳PHP库

2015/12/09 PHP

PHP多维数组元素操作类的方法

2016/11/14 PHP

php表单文件iframe异步上传实例讲解

2017/07/26 PHP

PHP实现函数内修改外部变量值的方法示例

2018/12/28 PHP

Laravel框架控制器的request与response用法示例

2019/09/30 PHP

PHP文件打开关闭及读写操作示例解析

2020/08/06 PHP

web css实现整站样式互相切换

2013/10/29 Javascript

JS中的异常处理方法分享

2013/12/22 Javascript

JS对象转换为Jquery对象实现代码

2013/12/29 Javascript

Node.js实现批量去除BOM文件头

2014/12/20 Javascript

javascript动态添加checkbox复选框的方法

2015/12/23 Javascript

一款简单的jQuery图片标注效果附源码下载

2016/03/22 Javascript

基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化

2016/05/12 Javascript

js实现动态创建的元素绑定事件

2016/07/19 Javascript

jquery attr()设置和获取属性值实例教程

2016/09/25 Javascript

Javascript实现汉字和拼音互转的终极方案

2016/10/19 Javascript

用jmSlip编写移动端顶部日历选择控件

2016/10/24 Javascript

通过原生JS实现为元素添加事件的方法

2016/11/23 Javascript

基于JS设计12306登录页面

2016/12/28 Javascript

关于js中的鼠标事件总结

2017/07/11 Javascript

微信小程序实现星级评价

2019/11/20 Javascript

原生javascript实现类似vue的数据绑定功能示例【观察者模式】

2020/02/24 Javascript

微信小程序开发搜索功能实现(前端+后端+数据库)

2020/03/04 Javascript

python正则表达式抓取成语网站

2013/11/20 Python

python使用xlrd与xlwt对excel的读写和格式设定

2017/01/21 Python

python打造爬虫代理池过程解析

2019/08/15 Python

Python 分布式缓存之Reids数据类型操作详解

2020/06/24 Python

用opencv给图片换背景色的示例代码

2020/07/08 Python

详解css3 mask遮罩实现一些特效

2018/10/24 HTML / CSS

英国领先的票务代理商之一：The Ticket Factory

2019/02/09 全球购物

Nobody Denim官网：购买高级女士牛仔裤

2021/03/15 全球购物

与UNIX有关的几个名词

2015/09/17 面试题

面料业务员岗位职责

2013/12/26 职场文书

矫正人员思想汇报

2014/01/08 职场文书

一年级评语大全

2014/04/23 职场文书

交通事故被告代理词

2015/05/23 职场文书