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

最新推荐文章于 2020-05-22 17:57:18 发布

dongbo201413

最新推荐文章于 2020-05-22 17:57:18 发布

阅读量163

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/SKLthegoodman/p/3556663.html

版权

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）

转载于:https://www.cnblogs.com/SKLthegoodman/p/3556663.html

dongbo201413

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对不同浏览器实现图片旋转。

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"&gt...
复制链接

扫一扫