网站地图    收藏   

主页 > 前端 > javascript >

javascript实现DIV图片旋转

来源:未知    时间:2014-06-13 13:51 作者:xbdadmin 阅读:

[导读] //IE浏览器旋转方法 function ieTrans(o,d){ o.style.fileter=d } //非IE浏览器旋转方法 function notieTrans(o,d){ o.style.MozTransform = d; o.style.webkitTransform = d; o.style.msTransform = d; o.style.OTransform = d; o.style.tran...

//IE浏览器旋转方法
function ieTrans(o,d){  
o.style.fileter=d
}
//非IE浏览器旋转方法
function notieTrans(o,d){
o.style.MozTransform = d;
    o.style.webkitTransform = d;
    o.style.msTransform = d;
    o.style.OTransform = d;
    o.style.transform = d;
}
 
//图片顺时针旋转
function rightRotate(){
var o=$('mainImg');
  if(Browser.name=='ie'){//IE
  var currentFilter = o.currentStyle.filter;
  if (currentFilter){
    var filterMatch = currentFilter.match(/rotation=(\d)+/);
    var r = parseInt(filterMatch[1]) + 1;
    if(r > 3) r = 0;
    ieTrans(o,'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + r + ')');
  }else{
    ieTrans(o,'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)');
  }
  }else{//非IE
  var currentFilter = o.style.MozTransform;
  //console.log(currentFilter);
  if (currentFilter){  //
    var filterMatch = currentFilter.match(/rotate\(([\-]?\d+)deg\)/);
   
    var r = parseInt(filterMatch[1]) + 90;
    if (r > 0) r = -270;
    console.log('rotate(' + r + 'deg)');
    notieTrans(o,'rotate(' + r + 'deg)');
  }else{
  //如果o.style.MozTransform不存在,就说明这是第一次旋转,也就是右转90度,-270
  console.log('rotate(-270deg)');
  notieTrans(o,'rotate(-270deg)');
    }
  }
}
//图片逆时针旋转
function leftRotate(){
var o=document.getElementById('mainImg');
  if(window.attachEvent){//IE
  var currentFilter = o.currentStyle.filter;
  if (currentFilter){
    var filterMatch = currentFilter.match(/rotation=(\d)+/);
    var r = parseInt(filterMatch[1]) - 1;
    if(r < 0) r = 3;
    ieTrans(o,'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + r + ')');
  }
  }else{//非IE
  var currentFilter = o.style.MozTransform;
  //console.log(currentFilter);
  if (currentFilter){
    console.log(currentFilter);
    var filterMatch = currentFilter.match(/rotate\(([\-]?\d+)deg\)/);
   
    var r = parseInt(filterMatch[1]) - 90;
    if (r > 270) r = 0;
    notieTrans(o,'rotate(' + r + 'deg)');
  }else{
  notieTrans(o,'rotate(270deg)');
  }
  }
}

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论