对不同浏览器实现图片旋转。

xhtml代码:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <title> ImageRotation </title>
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
 6 <style type="text/css">
 7 #demo { cursor:pointer; position:absolute;}
 8 </style>
 9 <script type="text/javascript" src="base.src.js"></script>
10 <script type="text/javascript">
11     window.onload = function() {
12         rotate(document.getElementById('demo'), 10);
13     };
14 </script>
15 </head>
16 <body>
17 <div id="container" style="width:500px;height:400px;position:relative;margin:0 auto">
18     <div id="demo">
19         <img src="http://images.cnblogs.com/cnblogs_com/bluedream2009/201609/o_mm.jpg" width="500" height="333" />
20     </div>
21 </div>
22 </body>
23 </html>

解决办法是先对验证各个不同的浏览器,对于webkit浏览器,使用CSS3的-webkit-transform{}来实现,对于ie,则使用filter属性下的progid:DXImageTransform.Microsoft.Matrix(),即DXImageTransform.Microsoft.Matrix矩阵。而其他的浏览器,这直接使用CSS3下的transform。

 1 var 
 2     userAgent = navigator.userAgent,
 3     isIE = /msie/i.test(userAgent) && !window.opera,
 4     isWebKit = /webkit/i.test(userAgent),
 5     isFirefox = /firefox/i.test(userAgent);
 6 function rotate(target, degree) {
 7     if (isWebKit) {
      //使用-webkit-transform.
8 target.style.webkitTransform = "rotate(" + degree + "deg)"; 9 } else if (isFirefox) {
      //使用-moz-transform
10 target.style.MozTransform = "rotate(" + degree + "deg)"; 11 } else if (isIE) { 12 //使用DXimageTransform.Microsoft.Matrix矩阵。 13 degree = degree / 180 * Math.PI; 14 var sinDeg = Math.sin(degree); 15 var cosDeg = Math.cos(degree); 16 17 target.style.filter = "progid:DXImageTransform.Microsoft.Matrix(" + 18 "M11=" + cosDeg + ",M12=" + (-sinDeg) + ",M21=" + sinDeg + ",M22=" + cosDeg + ",SizingMethod='auto expand')"; 19 } else {
      //其他浏览器直接使用CSS3标准
20 target.style.transform = "rotate(" + degree + "deg)"; 21 } 22 }

(参考自CSDN)

posted @ 2014-02-19 21:43  还好我是程序员  阅读(656)  评论(0编辑  收藏