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 相关文章推荐
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
domReady的实现案例
Nov 23 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
js异步上传多张图片插件的使用方法
Oct 22 Javascript
从0搭建vue-cli4脚手架
Jun 17 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
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的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
php实现搜索类封装示例
2016/03/31 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
ext 代码生成器
2009/08/07 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
浅析Python中的for 循环
2016/06/09 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
餐厅经理岗位职责范本
2014/02/17 职场文书
员工安全生产承诺书
2014/05/22 职场文书
公司活动总结范文
2014/07/01 职场文书
测绘工程专业求职信
2014/07/15 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android