<!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. Linux 学习之路 --------ip地址虚拟网络

    // ifconfig 查看IP地址 网络信息   我的IP  39.161.136.25 ①     为网卡临时配置IP地址 ifconfig eth0 39.161.136.5 (netmask ...

  2. 集合或数组转成String字符串

    1.将集合转成String字符串 String s=""; for (int i = 0; i < numList.size(); i++) { if (s=="& ...

  3. day11.2lambda函数表达式 及其返回值注意事项

    lambda表达式 用于表示简单的函数 func1=lambda 参数:一句话函数体(默认返回函数体内执行的内容) 1.1结构 func=lambda a1,a2 : a1+100 val=func( ...

  4. laravel-阿里大于

    安装扩展 # 安装curl模块apt-get install curl # 安装php5-curl扩展apt-get install php5-curl # 安装laravel阿里大鱼服务compos ...

  5. c# excel xlsx 保存

    public XSSFWorkbook Excel_Export(DataTable query,string title,int[] rowweight,string[] rowtitle) { X ...

  6. 一个权重的物体拷贝权重给多个（oneWeightToMany）

    你是否在做项目的时候经常会遇见一个物体带权重需要拷贝给其他物体,这时候其他物体多的数不胜数 你怎么办呢? 举例:假如一头狮子 身体你已经做好了,但是模型师把半个身体都做满了垂落的实体模型毛发,你是否感 ...

  7. JSP+javaBean：简易投票网页练习

    一.项目目标 session作用域中如果不及时清理一些对象,在一定久的时间或相当数量的请求后,造成session中大量对象堆积,这将严重影响服务器的性能. 在本实例中,通过写一个jsp与javaBea ...

  8. python的mysql小代码

    我因为懒,就想写个批量insert数据的小代码 这里是代码 # _*_ encoding:utf-8 _*_ import os import MySQLdb import numpy as np d ...

  9. 18.23 inline函数功能

    GUN的C关键字,在函数定义中函数返回类型前加上关键字inline,可以把函数指定为内联函数.关键字inline必须与函数定义放在一起才能使函数成为内联,仅仅将inline放在函数声明前面不起任何作用 ...

  10. Python脚本之Lrc歌词去时间轴转Txt文件，附带酷狗音乐APP关联已有krc歌词

    一.Lrc歌词去时间轴转Txt文件 环境:Python2.7.x, Mac(Windows需装cygwin环境,当然你也可以自己改代码,Python新手,勿喷) # -*- coding: UTF-8 ...