<!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. c++中函数的内存注意项

    函数不能返回指向栈内存的指针!因为返回的都是值拷贝! char *str = "abcd"这样就是字符串常量,这种能返回,而char str[] = "abcd" ...

  2. docker ，docker与虚拟机的区别

    什么是Docker: 1.Docker 是一个开源项目,诞生于 2013 年初,最初是 dotCloud 公司内部的一个业余项目.它基于 Google 公司推出的 Go 语言实现. 项目后来加入了 L ...

  3. 测试那些事儿—软测必备的Linux知识（四）

    1.文件权限管理 ls -l 显示的内容如下: 10个字符确定不同用户能对文件干什么 第一个字符:-表示文件,d表示目录,l表示链接 其余字符每3个一组(rwx),r-读,w-写,x-执行 第一组rw ...

  4. 从CSS到houdini

    0. 前言 平时写CSS,感觉有很多多余的代码或者不好实现的方法,于是有了预处理器的解决方案,主旨是write less &do more.其实原生css中,用上css变量也不差,加上bem命 ...

  5. JVM垃圾收集器-G1收集器

    G1收集器是当前收集器技术发展的最前沿成果,在JDK1.6_Updata14中提供了Early Access版本的G1收集器以供适用.G1收集器是垃圾收集器理论进一步发展的产物,它与前面的CMS收集器 ...

  6. java-多线程（上）

    ###24.01_多线程(多线程的引入)(了解) * 1.什么是线程     * 线程是程序执行的一条路径, 一个进程中可以包含多条线程     * 多线程并发执行可以提高程序的效率, 可以同时完成多 ...

  7. js···元素的属性

    Div.attributes 是所有标签属性构成的数据集合 Div.classList 是所有class名构成的数组集合 在classList的原型链上看以看到add()和remove(). clie ...

  8. Python项目依赖并生成requirements.txt

    一起开发项目的时候总是要搭建环境和部署环境的,这个时候必须得有个python第三方包的list,一般都叫做requirements.txt. 如果一个项目使用时virtualenv环境,还好办 pip ...

  9. [Java Web学习]Tomcat启动时报war exploded: Error during artifact deployment

    报错:Artifact FirstWeb:war exploded: Error during artifact deployment. See server log for details. SEV ...

  10. ELK 起航

    ELK与我 我在2017年8月份第一次听说ELK并搭建了一次,当时看到KIBANA页面超级炫酷非常激动.现在已经过去了四个月了,现在的情况不像刚开始哪有无知了.现在是要应用到实际的项目中.首先说一下整 ...