图片的每点击一次旋转90度, filter和css3属性

最新推荐文章于 2024-04-29 00:45:00 发布

zz_whw

最新推荐文章于 2024-04-29 00:45:00 发布

阅读量5k

点赞数 2

分类专栏： js技术文章标签： filter和css3属性

本文链接：https://blog.csdn.net/zz_whw/article/details/70241194

版权

js技术专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

   <head>
       <title> ImageRotation </title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       
       <meta http-equiv="X-UA-Compatible" content="IE=8,10;chrome=1"/>

       <style type="text/css">
           #container {
               position: relative;
               width: 800px;
               height: 600px;
               margin: 0 auto;
               border: 1px solid red;

           }

           .thin {
               cursor: pointer;
               position: absolute;
               top: 50%;
               left: 50%;
               margin-left: -250px;
               margin-top: -175px;
               z-index: -1;
               filter: progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");
           }
       </style>
   </head>

   <body>
       <div id="container" style="">
           <a href=""></a>
           <img id="rotateImg" class="thin" src="img/11.jpg" width="500" height="350" />
       </div>
       <button class="zoomIn">放大按钮</button>
       <button class="rota_btn">旋转按钮</button>
       <script src="js/jquery-1.7.2.min.js" type="text/javascript">
       </script>

       <script>
//   1.在Ie9以下是可以用的,但是IE10和11不能用,ie9+以上不支持滤镜,开始支持css3高版本了,
//   2,
//       <meta id="IE10" http-equiv="X-UA-Compatible" content="IE=8,chrome=1"/>
//   目前的问题是:   无法把Ie10和Ie8区分开了
           var currentDeg = 0;
           function rotateImg(){
              currentDeg = (currentDeg + 90) % 360;
               //判断是否IE
               function myBrowser() {
                   var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
                   var isOpera = userAgent.indexOf("Opera") > -1;
                   //判断是否IE浏览器
                   if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
                       if(userAgent.indexOf('MSIE 10.0')>-1){
                           return 'IE10';
                       }
                       return "IE";
                   };
                   //判断是否IE浏览器
                   if(userAgent.indexOf("Trident") > -1) {
                       if(userAgent.indexOf('rv:11.0')>-1){
                           return 'IE11';
                       }
                       return "Edge";
                   }
//                       if(Number(navigator.userAgent.match(/msie (\d+\.\d+)/i)[1])>=10.0){
//                        return "IE10";
//                              }
               }

               // var IE10transform=navigator.userAgent.match(/msie (\d+\.\d+)/i)[1]>=10.0;
               var sinDeg = 0,cosDeg = 0;
                   target = document.getElementById('rotateImg');
                   $target = $('.thin');
                   if((myBrowser()==="IE"||myBrowser()==="Edge")&&myBrowser()!="IE10") { // IE 浏览器进行的旋转，IE不提供transform，所以得自己计算位置
                           cosDeg = Math.cos(currentDeg * Math.PI / 180);
                       sinDeg = Math.sin(currentDeg * Math.PI / 180);
                       with(target.filters.item(0)) {
                           M11 = M22 = cosDeg;
                           M12 = -(M21 = sinDeg);
                       }
                       $target.css({
                           'left': "50%",
                           'top': "50%",
                           "marginLeft": -$target.width() / 2,
                           "marginTop": -$target.height() / 2
                       });

               }else{
                   $target.css({
               'transform': "rotate(" + currentDeg + "deg)"
                   });
           }
//else if(target.style.MozTransform !== undefined) {
//                       target.style.MozTransform = 'rotate(' + currentDeg + 'deg)';
//                   } else if(target.style.OTransform !== undefined) {
//                       target.style.OTransform = 'rotate(' + currentDeg + 'deg)';
//                   } else if(target.style.webkitTransform !== undefined) {
//                       target.style.webkitTransform = 'rotate(' + currentDeg + 'deg)';
//                   } else if(target.style.MsTransform !== undefined) {
//                       target.style.MsTransform = 'rotate(' + currentDeg + 'deg)';
//                   } else {
//                       target.style.transform = "rotate(" + currentDeg + "deg)";
//                   }
               };

           $('.rota_btn').click(function() {
                 rotateImg();
           })
           $('.zoomIn').click(function() {
               ZoomIn(1.05);
           })
           function ZoomIn(parm1) {
               var $img = $('.thin');
               var wid = $img.width() * parm1;
               var hig = $img.height() * parm1;
               var img_width = parseInt(wid) / 2;
               var img_height = parseInt(hig) / 2;
               $('.thin').css({
                   'left': "50%",
                   'top': "50%",
                   "marginLeft": -img_width,
                   "marginTop": -img_height
               });
               if($img.width() >= $img.height()) {
                   $('.thin').css('width', wid + 'px');
                   $('.thin').css('height', hig + 'px');
               } else {
                   $('.thin').css('width', hig + 'px');
                   $('.thin').css('height', wid + 'px');
               }
           }
       </script>
   </body>

</html>