JS控制图片翻转示例代码(兼容firefox,ie,chrome)


Posted in Javascript onDecember 19, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>图片旋转效果</title> 
<meta http-equiv="content-type" content="text/html;charset=gb2312"> 
<!--把下面代码加到<head>与</head>之间--> 
<style type="text/css"> 
ul{padding:0 15px;} 
ul li{padding-bottom:15px;border-bottom:1px dashed #EEE;} 
.caption{padding:15px 0 5px;} 
.caption input{margin-right:10px;padding:0 10px;} 
</style> 
<script type="text/javascript"> 
/* 
* www.byzuo.com 
* ok!: MSIE 6, 7, 8, Firefox 3.6, chrome 4, Safari 4, Opera 10 
* o 旋转图片ID; 
* p 选择旋转方向,固定值为'left'或'right'; 
*/ 
function rotate(o,p){ 
    var img = document.getElementById(o); 
    if(!img || !p) return false; 
    var n = img.getAttribute('step'); 
    if(n== null) n=0; 
    if(p=='right'){ 
        (n==3)? n=0:n++; 
    }else if(p=='left'){ 
        (n==0)? n=3:n--; 
    } 
    img.setAttribute('step',n); 
    //MSIE 
    if(document.all) { 
        img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')'; 
        //HACK FOR MSIE 8 
        switch(n){ 
            case 0: 
                imgimg.parentNode.style.height = img.height; 
                break; 
            case 1: 
                imgimg.parentNode.style.height = img.width; 
                break; 
            case 2: 
                imgimg.parentNode.style.height = img.height; 
                break; 
            case 3: 
                imgimg.parentNode.style.height = img.width; 
                break; 
        } 
    //DOM 
    }else{ 
        var c = document.getElementById('canvas_'+o); 
        if(c== null){ 
            img.style.visibility = 'hidden'; 
            img.style.position = 'absolute'; 
            c = document.createElement('canvas'); 
            c.setAttribute("id",'canvas_'+o); 
            img.parentNode.appendChild(c); 
        } 
        var ccanvasContext = c.getContext('2d'); 
        switch(n) { 
            default : 
            case 0 : 
                c.setAttribute('width', img.width); 
                c.setAttribute('height', img.height); 
                canvasContext.rotate(0 * Math.PI / 180); 
                canvasContext.drawImage(img, 0, 0); 
                break; 
            case 1 : 
                c.setAttribute('width', img.height); 
                c.setAttribute('height', img.width); 
                canvasContext.rotate(90 * Math.PI / 180); 
                canvasContext.drawImage(img, 0, -img.height); 
                break; 
            case 2 : 
                c.setAttribute('width', img.width); 
                c.setAttribute('height', img.height); 
                canvasContext.rotate(180 * Math.PI / 180); 
                canvasContext.drawImage(img, -img.width, -img.height); 
                break; 
            case 3 : 
                c.setAttribute('width', img.height); 
                c.setAttribute('height', img.width); 
                canvasContext.rotate(270 * Math.PI / 180); 
                canvasContext.drawImage(img, -img.width, 0); 
                break; 
        } 
    } 
} 
</script> 
</head> 
<body> 
<!--把下面代码加到<body>与</body>之间--> 
<ul class="clearfix"> 
    <li> 
        <div class="caption"> 
            <input type="button" value="turn left" onclick="rotate('pic_1','left')"> 
            <input type="button" value="turn right" onclick="rotate('pic_1','right')"> 
        </div> 
        <div class="cont"> 
            <img  alt="javascript 图片旋转效果"  id="pic_1" src="1.gif" alt=""> 
        </div> 
    </li> 
</ul> 
</body> 
</html>
Javascript 相关文章推荐
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 #Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 #Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 #Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 #Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 #Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 #Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 #Javascript
You might like
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
JS的数组迭代方法
2015/02/05 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
Python回调函数用法实例详解
2015/07/02 Python
Python实现随机选择元素功能
2017/09/14 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
Python3进制之间的转换代码实例
2019/08/24 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
百思买美国官网:Best Buy
2016/07/28 全球购物
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
final, finally, finalize的区别
2012/03/01 面试题
素质拓展感言
2014/01/29 职场文书
电视购物广告词
2014/03/19 职场文书
土地转让协议书
2014/04/15 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
Vue2.0搭建脚手架
2022/03/13 Vue.js