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判断变量是否空值的代码
Oct 26 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 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/01/27 PHP
PHP重定向的3种方式
2013/03/07 PHP
php数组使用规则分析
2015/02/27 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
Javascript Math对象
2009/08/13 Javascript
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
TensorFlow实现创建分类器
2018/02/06 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
Python数据存储之 h5py详解
2019/12/26 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
物业管理求职自荐信
2013/09/25 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
工作收入证明模板
2015/06/12 职场文书