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 相关文章推荐
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 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高自定义性安全验证码代码
2011/11/27 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
jQuery功能函数详解
2015/02/01 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
js实现随机数小游戏
2019/06/28 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
Django框架中的对象列表视图使用示例
2015/07/21 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
python计算auc指标实例
2017/07/13 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
Django中多种重定向方法使用详解
2019/07/17 Python
如何基于python实现归一化处理
2020/01/20 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
拓展培训心得体会
2014/01/04 职场文书
生产文员岗位职责
2014/04/05 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
内勤岗位职责
2015/02/10 职场文书
转正申请报告格式
2015/05/15 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
使用Python解决图表与画布的间距问题
2022/04/11 Python
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js