<!DOCTYPE HTML>

    <head>

        <title>JS实现图片向左向右翻转</title>

        <meta http-equiv="content-type" content="text/html;charset=UTF-8">

        <script type="text/javascript">

            function rotate(o, p) {

                var img = document.geiElmentById(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 +')';

                    switch(n) {

                        case 0:

                            img.parentNode.style.height = img.height;

                            break;

                        case 1:

                            img.parentNode.style.height = img.width;

                            break;

                        case 2:

                            img.parentNode.style.height = img.height;

                            break;

                        case 3:

                            img.parentNode.style.height = img.width;

                            break;

                    }

                } 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 canvasContent = c.getContext('2d');

                    switch(n) {

                        default:

                        case 0:

                            c.setAttribute('width', img.width);

                            c.setAttribute('height', img.height);

                            canvasContent.rotate(0 * Math.PI / 180);

                            canvasContent.drawImage(img, 0, 0);

                            break;

                        case 1:

                            c.setAttribute('width', img.width);

                            c.setAttribute('height', img.height);

                            canvasContent.rotate(90 * Math.PI / 180);

                            canvasContent.drawImage(img, 0, -img.height);

                            break;

                        case 2:

                            c.setAttribute('width', img.width);

                            c.setAttribute('height', img.height);

                            canvasContent.rotate(180 * Math.PI / 180);

                            canvasContent.drawImage(img, -img.width, -img.height);

                            break;

                        case 3:

                            c.setAttribute('width', img.width);

                            c.setAttribute('height', img.height);

                            canvasContent.rotate(270 * Math.PI / 180);

                            canvasContent.drawImage(img, -img.width, 0);

                            break;

                    }

                }

            }

        </script>

    </head>

    <body>

        <div class="container">

            <input type="button" value="turn left" onclick="rotate('pic', 'left')" />

            <input type="button" value="turn right" onclick="rotate('pic', 'right')" />

            <div class="cont" onclick="rotate('pic', 'right')">

                <img id="pic" src="1.jpg" alt="" />

            </div>

        </div>

    </body>

</html>

JS 实现兼容IE图片向左或向右翻转的更多相关文章

  1. vue+hammer.js完美实现长按、左滑，右滑等触控事件

    移动端使用手指直接操作的方式大受用户欢迎,这其中就包括了单点.多点.长按.双击等方式. 这么多触控事件,如果开发者自己实现,会浪费大量的时间和精力,快来看看 hammer.js 让我们轻松了多少吧. ...

  2. 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活

    图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...

  3. 关于js的兼容问题(小办法)！

    今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=docu ...

  4. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  5. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  6. 前端js保存页面为图片下载到本地

    前端js保存页面为图片下载到本地 手机端点击下载按钮将页面保存成图片到本地 前端js保存页面为图片下载到本地的坑 html2canvas 识别 svg 解决方案 方案 html2canvas.js:可 ...

  7. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  8. js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示

    js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...

  9. 设为首页 和 收藏本站js代码 兼容IE,chrome,ff

    设为首页 和 收藏本站js代码 兼容IE,chrome,ff //设为首页 function SetHome(obj,url){ try{ obj.style.behavior='url(#defau ...

随机推荐

  1. 根据某字段将其他字段进行拼接的两种方法（SYS_CONNECT_BY_PATH及wm_concat）

    秘书姐姐说想知道她发起的所有流程,现在都到谁审批了.由于一条流程当前审批人可能有多个,故需根据单据编号(djbh)将审批人拼接到一个字段中. 说明: wfn审批历史记录表,djbh 单据编号,pk_c ...

  2. C语言-第2次作业得分

    作业链接:https://edu.cnblogs.com/campus/hljkj/CS20180的2/homework/2292 作业链接:https://edu.cnblogs.com/campu ...

  3. 自学java_Struts2框架

    一.Struts2基础 1.Struts2是有Apache在Struts1和Webwork的基础上研发出的新一代MVC框架. 2.Struts2开发环境的搭建: 打开https://struts.ap ...

  4. centos安装实用总结

    1.常用软件安装: yum install -y bash-completion vim lrzsz wget expect net-tools nc nmap tree dos2unix htop ...

  5. 2018-2019-2 20165313 Exp3 免杀原理与实践

    实践内容(3.5分) 1.1 正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,自己利用shellcode编程等免杀工具或技巧:(1.5分) 1.2 通过组合 ...

  6. php闭包的使用实例

    $childrenNodes = array_filter($list, function($item) use($parentId){ return $item->node_pid == $p ...

  7. response响应

    郭晨 软件151 1531610114 response1.response常用APIsetStatus:设置响应行当中的状态码setHeader:设置响应头信息getOutputStream:获得字 ...

  8. magento 1.9 nginx 404

    原来的nginx 配置 lnmp 环境默认的 location ~ [^/]\.php(/|$) { fastcgi_param SCRIPT_FILENAME $document_root$fast ...

  9. zabbix 监控第三方网络

    背景 业务需要到一些第三方网络取数据,有时业务不能用,就需要跑到服务器上telnet第三方端口,排查是否网络问题.所以需要一个检测第三方端口的监控. net.tcp.service[service,& ...

  10. 18.17 U-Boot+内核移植

    18.17.1 移植U-Boot-2012.04.08 1.下载.建立source insight工程.编译.烧写.如果无运行分析原因. $ .tar.bz2 $ cd u-boot- $ make ...