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 相关文章推荐
JS按字节截取字符长度实例
Nov 20 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
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
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
python Django批量导入不重复数据
2016/03/25 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
Python连接Redis的基本配置方法
2018/09/13 Python
详解Python模块化编程与装饰器
2021/01/16 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
教师实习的自我鉴定
2013/10/26 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
个人求职自荐信范文
2015/03/06 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
vue实现拖拽交换位置
2022/04/07 Vue.js