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 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
vue页面切换过渡transition效果
Oct 08 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 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
php分页函数
2006/07/08 PHP
php操作excel文件 基于phpexcel
2010/07/02 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
ext读取两种结构的xml的代码
2008/11/05 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
Layui给switch添加响应事件的例子
2019/09/03 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
详解python 爬取12306验证码
2019/05/10 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
Python如何生成xml文件
2020/06/04 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
高二学生评语大全
2014/04/25 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python