2D图像旋转javascript在所有浏览器中工作.需要帮助修复我的代码

2D image rotation javascript to work in all browsers. Help needed to fix my code

本文关键字：帮助 代码 我的 工作 javascript 旋转 图像 浏览器 2D      更新时间：2023-09-26

我试图有一个简单的图像旋转来回鼠标点击。我一直在尝试使用jQuery。我写的代码在Safari, Firefox和Chrome中都可以正常工作。问题出在ie9、ie11和ie10上，我不需要测试它们。我做了一个测试页面，任何人都可以看到我完成了什么，并测试自己在IE中发生了什么。这是我的测试页面的链接我很感激如果有人指出我使用的代码添加或删除什么，使其在IE 10和11中工作的方式与上面提到的其他浏览器中的工作方式相同。

非常感谢!

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>.rotate() - Simple rotation on mouse click of the image</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><style type="text/css"></style>
  <style type="text/css">    body {
  padding:0px;
  background: transparent;
}
img {
  margin-bottom:0px;
}</style>
<script type="text/javascript">//<![CDATA[ 
// .rotate() cross
$(function() {
  $('#btn3').toggle(function() {
    $(this).rotate({ endDeg:90, persist:true });
  }, function() {
    $(this).rotate({ endDeg:45 });
  });
  })
$.fn.rotate=function(options) {
  var $this=$(this), prefixes, opts, wait4css=0;
  prefixes=['-Webkit-', '-Moz-', '-O-', '-ms-', ''];
  opts=$.extend({
    startDeg: false,
    endDeg: 360,
    duration: .25,
    count: 1,
    easing: 'linear',
    animate: {},
    forceJS: false
  }, options);
  function supports(prop) {
    var can=false, style=document.createElement('div').style;
    $.each(prefixes, function(i, prefix) {
      if (style[prefix.replace(/'-/g, '')+prop]==='') {
        can=true;
      }
    });
    return can;
  }
  function prefixed(prop, value) {
    var css={};
    if (!supports.transform) {
      return css;
    }
    $.each(prefixes, function(i, prefix) {
      css[prefix.toLowerCase()+prop]=value || '';
    });
    return css;
  }
  function generateFilter(deg) {
    var rot, cos, sin, matrix;
    if (supports.transform) {
      return '';
    }
    rot=deg>=0 ? Math.PI*deg/180 : Math.PI*(360+deg)/180;
    cos=Math.cos(rot);
    sin=Math.sin(rot);
    matrix='M11='+cos+',M12='+(-sin)+',M21='+sin+',M22='+cos+',SizingMethod="auto expand"';
    return 'progid:DXImageTransform.Microsoft.Matrix('+matrix+')';
  }
  supports.transform=supports('Transform');
  supports.transition=supports('Transition');
  opts.endDeg*=opts.count;
  opts.duration*=opts.count;
  if (supports.transition && !opts.forceJS) { // CSS-Transition
    if ((/Firefox/).test(navigator.userAgent)) {
      wait4css=(!options||!options.animate)&&(opts.startDeg===false||opts.startDeg>=0)?0:25;
    }
    $this.queue(function(next) {
      if (opts.startDeg!==false) {
        $this.css(prefixed('transform', 'rotate('+opts.startDeg+'deg)'));
      }
      setTimeout(function() {
        $this
          .css(prefixed('transition', 'all '+opts.duration+'s '+opts.easing))
          .css(prefixed('transform', 'rotate('+opts.endDeg+'deg)'))
          .css(opts.animate);
      }, wait4css);
      setTimeout(function() {
        $this.css(prefixed('transition'));
        if (!opts.persist) {
          $this.css(prefixed('transform'));
        }
        next();
      }, (opts.duration*1000)-wait4css);
    });
  } else { // JavaScript-Animation + filter
    if (opts.startDeg===false) {
      opts.startDeg=$this.data('rotated') || 0;
    }
    opts.animate.perc=100;
    $this.animate(opts.animate, {
      duration: opts.duration*1000,
      easing: $.easing[opts.easing] ? opts.easing : '',
      step: function(perc, fx) {
        var deg;
        if (fx.prop==='perc') {
          deg=opts.startDeg+(opts.endDeg-opts.startDeg)*perc/100;
          $this
            .css(prefixed('transform', 'rotate('+deg+'deg)'))
            .css('filter', generateFilter(deg));
        }
      },
      complete: function() {
        if (opts.persist) {
          while (opts.endDeg>=360) {
            opts.endDeg-=360;
          }
        } else {
          opts.endDeg=0;
          $this.css(prefixed('transform'));
        }
        $this.css('perc', 0).data('rotated', opts.endDeg);
      }
    });
  }
  return $this;
};
//]]></script>
</head>
<body>
<img src="http://f.cl.ly/items/2B0t0j1c2P0m2B080D2H/RedCross-.gif" id="btn3">
</body></html>

参考这个JSFiddle

JQuery 

$('a').click(function(){
    var a = $('img').getRotateAngle();
    var d = Math.abs($('#degree').val());
    if($(this).attr('id') == 'counter'){
       //d = -Math.abs(+a - +d);
        d = a - d;
    }
    else{d = +a + +d;}
    $('img').rotate({animateTo:d});
});
/* image preview */
$('#file').change(function(){
    var oFReader = new FileReader();
    oFReader.readAsDataURL(this.files[0]);
    console.log(this.files[0]);
    oFReader.onload = function (oFREvent) {
        $('#preview').html('<img src="'+oFREvent.target.result+'">');
    };
});
相关文章：