<!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. Error: “app_name” is not translated in af

    in values/strings.xml   "app_name" is not translated in af, am, ar, be, bg, ca, cs, da, de ...

  2. Apache HTTP 服务器 2.4（又名httpd）安装\配置 \启动

    Apache HTTP 服务器 2.4 源文档  

  3. Springboot整合Mybatis-puls

    Spring boot对于我来说是一个刚接触的新东西,学习过程中,发现这东西还是很容易上手的,Spring boot没配置时会默认使用Spring data jpa,这东西可以说一个极简洁的工具,可是 ...

  4. maven使用utf8等

    pom.xml: <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncodi ...

  5. 学习笔记CB005:关键词、语料提取

    关键词提取.pynlpir库实现关键词提取. # coding:utf-8 import sys import importlib importlib.reload(sys) import pynlp ...

  6. python bif

    filter(过滤器):   语法:         filter(function, iterable)         funciton 为判断函数         iterable 为可迭代对象 ...

  7. thinkphp5.0.22远程代码执行漏洞分析及复现

    虽然网上已经有几篇公开的漏洞分析文章,但都是针对5.1版本的,而且看起来都比较抽象:我没有深入分析5.1版本,但看了下网上分析5.1版本漏洞的文章,发现虽然POC都是一样的,但它们的漏洞触发原因是不同 ...

  8. Java（异常、枚举）

    异常 在程序执行过程中由于设计或设备原因导致的程序中断的异常现象叫做异常 在try-catch-finally代码块中,finally是一定会执行的部分,如果finally中有return部分,则一定 ...

  9. Eclipse 中快捷键

    Ctrl + Shift + T   查看原生类定义

  10. 面试题-linux基础

    Linux基础和git linux的基础命令(怎么区分一个文件还是文件夹) ls -F  在显示名称的时候会在文件夹后面添加“/”, 在文件后面加“*” 日志以什么格式,存放在哪里?日志可以存储在“/ ...