zoukankan      html  css  js  c++  java
  • js 旋转图片

    /*图片转动函数*/
    function rotate(o, p) {
    var img = document.getElementById(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);

    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 canvasContext = c.getContext('2d');
    canvasContext.save();
    switch(n){
    default :
    case 0:
    c.setAttribute('width', img.width);
    c.setAttribute('height', img.height);
    canvasContext.rotate(0 * Math.PI/180);
    canvasContext.drawImage(img, 0, 0);
    break;
    case 1:
    c.setAttribute('width', img.height);
    c.setAttribute('height', img.width);
    canvasContext.rotate(90 * Math.PI/180);
    canvasContext.drawImage(img, 0, -img.height);

    break;
    case 2:
    c.setAttribute('width', img.width);
    c.setAttribute('height', img.height);
    canvasContext.rotate(180 * Math.PI/180);
    canvasContext.drawImage(img, -img.width, -img.height);
    break;
    case 3:
    c.setAttribute('width', img.height);
    c.setAttribute('height', img.width);
    canvasContext.rotate(270 * Math.PI/180);
    canvasContext.drawImage(img, -img.width, 0);
    break;

    }
    canvasContext.restore();
    }

    }

  • 相关阅读:
    Linux I/O状态实时监控iostat
    Linux系统常用监控系统状态信息命令
    Linux查看网络信息命令
    Linux服务器进程信息查看命令
    Linux服务器的日志管理
    Linux令普通用户拥有root权限
    linux后台运行之&和nohup区别,模拟后台守护进程
    Linux之shell终端使用操作快捷键
    linux解压缩命令之unzip,tar(持续更新)
    Centos7 安装部署redis及其入门使用
  • 原文地址:https://www.cnblogs.com/liubingna/p/2919308.html
Copyright © 2011-2022 走看看