<!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. vue打包后接口报错

    最近自己和朋友做了一个小的项目,用的是vue3.x版本,本地dev运行的时候接口什么的都是正常的,但是build打包后本地使用anywhere启动一个本地服务的时候发现接口报错405状态,发布到线上接 ...

  2. 20155219 付颖卓《基于ARM试验箱的接口应用于测试》课程设计个人报告

    一.个人贡献 参与课设题目讨论及完成全过程: 资料收集: 负责代码调试: 修改小组结题报告: 负责试验箱的管理: 二.设计中遇到的问题及解决方法 1.makefile无法完成编译.如下图: 答:重新下 ...

  3. 在进行多次scanf时，printf输出错误

    随便一处代码,经过改正后,输出正确的 ''' #include <stdio.h> int main(){    int T;    scanf("%d",&T ...

  4. css之line-height及图片文字垂直居中

    css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的 ...

  5. TensorFlow，Keras限制GPU显存

    运行TensorFlow程序会占用过多的显卡比例,多人共同使用GPU的时候,会造成后面的人无法运行程序. 一.TensorFlow 1.预加载比例限制 tf_config = tensorflow.C ...

  6. Request、Response

    Request Request对象在我们写爬虫发送请求的时候调用,参数如下: url: 就是需要请求的url callback: 指定该请求返回的Response由那个函数来处理. method: 请 ...

  7. Node - centOS配置环境

    1.安装依赖包:yum install gcc-c++ openssl-devel (gcc版本查询:gcc -v ,为 4.4.7-11:python版本查询:python –version 为2. ...

  8. ubuntu下cannot find lib....so.x 寻找动态链接库

    默认从/lib . /usr/lib 以及配置文件/etc/ld.so.conf内所列的目录下加载.so文件, 进而创建出动态装入程序(ld.so)所需的连接和缓存文件. 缓存文件默认为/etc/ld ...

  9. Ubuntu使用总结一

    一.安装 Ubuntu桌面版与服务器版的不同之处桌面版面向个人电脑使用者,可以进行文字处理.网页浏览.多媒体播放和玩游戏.本质上说,这是一 个为普通用户所定制的多用途操作系统.另一方面,服务器版旨在充 ...

  10. 查看那些进程使用了swap

    https://blog.csdn.net/xiangliangyu/article/details/8213127$ sudo pacman -S iotop https://blog.longwi ...