Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

transform #83

Open
RubyLouvre opened this issue May 19, 2014 · 0 comments
Open

transform #83

RubyLouvre opened this issue May 19, 2014 · 0 comments

Comments

@RubyLouvre
Copy link
Owner 

Module.extend('Util', function(util) {
    var dom = util.DOM;
    var setOriginOffset = function(el) {
        el.IESUCKS = {
            width : el.offsetWidth,
            height: el.offsetHeight
        };
    };
    var transformKey = function() {
        style = document.body.style;
        var keys = ['transform', 'msTransform', 'MozTransform', 'webkitTransform', 'OTransform'];
        for (var i = keys.length; i--;) {
            if (keys[i] in style) {
                return keys[i];
            }
        }
        return null;
    }();
    dom.rotateAndScale = function(el, angle, scale) {
        scale = scale || 1;
        angle = angle || 0;

        if(transformKey) {
            var rs = 'rotate(' + angle + 'deg) scale(' + scale + ')';
            el.style[transformKey] = rs;
        }else { ////ie8- Matrix filter .

            var filterType = 'DXImageTransform.Microsoft.Matrix';
            var fullFilterType = 'progid:' + filterType;
            var currentFilter = el.style.filter;
            var filterIndex = currentFilter.indexOf(fullFilterType);
            if(currentFilter == '') {
                el.style.filter = fullFilterType;
            }else if (filterIndex < 0) {
                el.style.filter = currentFilter + ' ' + fullFilterType;
            }

            var filters = el.filters;
            var rad = angle * Math.PI / 180;
            var sinA = Math.sin(rad);
            var cosA = Math.cos(rad);
            var m11 = cosA * scale;
            var m12 = -sinA * scale;
            var m21 = sinA * scale;
            var m22 = cosA * scale;

            filters.item(filterType).M11 = m11;
            filters.item(filterType).M12 = m12;
            filters.item(filterType).M21 = m21;
            filters.item(filterType).M22 = m22;
            filters.item(filterType).SizingMethod = "auto expand";


            if (!el.IESUCKS) {
                setOriginOffset(el)
            }


            var offset = el.IESUCKS;
            var originWidth = offset.width;
            var originHeight = offset.height;

            var scaleOffsetWidth = (originWidth - scale * originWidth) / 2 / scale;
            var scaleOffsetHeight = (originHeight - scale * originHeight) / 2 / scale;
            var coefficient = 14.2;
            var fixedWidth = originHeight / coefficient / scale;
            var fixedHeight = originWidth / coefficient / scale;
            fixedWidth = fixedheight = 0;


            //mlgbd ie 的修正值.都要考虑scale的影响.所以,所有修正系数都要和scale重新计算后再进行修正.
            el.style.marginLeft = (originWidth - el.offsetWidth) / 2 + scaleOffsetWidth - fixedWidth + 'px';
            el.style.marginTop = (originHeight - el.offsetHeight) / 2 + scaleOffsetHeight - fixedHeight + 'px';


        }
    };
});

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>sidebar</title>
    <style>
      .p{
        width : 200px;height:200px;font-size:1px;
        position:absolute; border:solid 1px #000;
      }
      #fuck{
        border:none;width:100px;height:100px;position:absolute;top:50px; left:50px;background:red
      }
    </style>
</head>
<body>

    <div class="p" style="left:400px;top:400px;">

        <div id="fuck" class="p" style="right:50px;bottom:50px">1</div>
    </div>

    <script>


      var transformKey = function  () {
          style = document.body.style;
          var keys = ['transform', 'msTransform', 'MozTransform', 'webkitTransform', 'OTransform'];
          for(var i = keys.length; i--; ){
            if(keys[i] in style){
              return keys[i];
            }
          }
          return null;
        }();

        var setOriginOffset = function(el) {

          if (!el.IESUCKS) {
            el.IESUCKS = {
              width : el.offsetWidth,
              height : el.offsetHeight
            };
          }

        };

        var rotateAndScale = function  (el, angle, scale) {
                  scale = scale || 1;
                  angle = angle || 0;
                  var rs = 'rotate(' + angle + 'deg) scale(' + scale + ')';

                  if(transformKey){
                    el.style[transformKey] = rs;
                  }else{ ////ie8- Matrix filter .
                    var filterType = 'DXImageTransform.Microsoft.Matrix';
                    var fullFilterType = 'progid:' + filterType;
                    var currentFilter = el.style.filter;
                    var filterIndex = currentFilter.indexOf(fullFilterType);
                    if(currentFilter == ''){
                      el.style.filter = fullFilterType; 
                    }else if(filterIndex < 0){
                      el.style.filter = currentFilter + ' ' + fullFilterType;
                    }




                    var filters = el.filters;
                    var rad = angle * Math.PI / 180;
                    var sinA = Math.sin(rad);
                    var cosA = Math.cos(rad);
                    var m11 = cosA * scale;
                    var m12 = -sinA * scale;
                    var m21 = sinA * scale;
                    var m22 = cosA * scale;

                    filters.item(filterType).M11 = m11;
                    filters.item(filterType).M12 = m12;
                    filters.item(filterType).M21 = m21;
                    filters.item(filterType).M22 = m22;
                    filters.item(filterType).SizingMethod="auto expand";

                    if(!el.IESUCKS){

                      setOriginOffset(el)

                    }
                    var offset = el.IESUCKS;
                    var originWidth = offset.width;
                    var originHeight = offset.height;
                    var scaleOffsetWidth = (originWidth - scale * originWidth) / 2 / scale;
                    var scaleOffsetHeight = (originHeight - scale * originHeight ) / 2 / scale;
                    var coefficient = 14.2;
                    var fixedWidth = originHeight / coefficient / scale;
                    var fixedHeight = originWidth / coefficient / scale;

                    //mlgbd ie 的修正值.都要考虑scale的影响.所以,所有修正系数都要和scale重新计算后再进行修正.

                    var marginLeft = (originWidth - el.offsetWidth)/2 + scaleOffsetWidth - fixedWidth;
                    var marginTop = (originHeight - el.offsetHeight)/2  + scaleOffsetHeight - fixedHeight;
                    el.style.marginLeft = marginLeft + 'px';
                    el.style.marginBottom = -marginTop + 'px'

                  } 
        };
        var el = document.getElementById('fuck');
        var angle = 0;
        document.onclick  = function  () {
          timer = setInterval(function  () {
            angle += 10;
              if(angle === 360){
                angle = 0;
                clearInterval(timer);
              }
              rotateAndScale(el, angle, 1);
          }, 50)
        };



    </script>

</body>
</html>

然后,更傻逼的地方在于..ie8 和ie6的行为是相反的.....
贵妃】教主Franky
``html
<!doctype html>

<title>sidebar</title> <style> .p{ width : 200px;height:200px;font-size:1px; position:absolute; border:solid 1px #000; } #fuck{ border:none;width:100px;height:100px;position:absolute;background:red } </style> 
<div class="p" style="left:400px;top:400px;">

    <div id="fuck" class="p" style="right:50px;bottom:50px">1</div>
</div>

<script>


  var transformKey = function  () {
      style = document.body.style;
      var keys = ['transform', 'msTransform', 'MozTransform', 'webkitTransform', 'OTransform'];
      for(var i = keys.length; i--; ){
        if(keys[i] in style){
          return keys[i];
        }
      }
      return null;
    }();

    var setOriginOffset = function(el) {

      if (!el.IESUCKS) {
        el.IESUCKS = {
          width : el.offsetWidth,
          height : el.offsetHeight
        };
      }

    };

    var rotateAndScale = function  (el, angle, scale) {
              scale = scale || 1;
              angle = angle || 0;
              var rs = 'rotate(' + angle + 'deg) scale(' + scale + ')';

              if(transformKey){
                el.style[transformKey] = rs;
              }else{ ////ie8- Matrix filter .
                var filterType = 'DXImageTransform.Microsoft.Matrix';
                var fullFilterType = 'progid:' + filterType;
                var currentFilter = el.style.filter;
                var filterIndex = currentFilter.indexOf(fullFilterType);
                if(currentFilter == ''){
                  el.style.filter = fullFilterType; 
                }else if(filterIndex < 0){
                  el.style.filter = currentFilter + ' ' + fullFilterType;
                }




                var filters = el.filters;
                var rad = angle * Math.PI / 180;
                var sinA = Math.sin(rad);
                var cosA = Math.cos(rad);
                var m11 = cosA * scale;
                var m12 = -sinA * scale;
                var m21 = sinA * scale;
                var m22 = cosA * scale;

                filters.item(filterType).M11 = m11;
                filters.item(filterType).M12 = m12;
                filters.item(filterType).M21 = m21;
                filters.item(filterType).M22 = m22;
                filters.item(filterType).SizingMethod="auto expand";

                if(!el.IESUCKS){

                  setOriginOffset(el)

                }
                var offset = el.IESUCKS;
                var originWidth = offset.width;
                var originHeight = offset.height;
                var scaleOffsetWidth = (originWidth - scale * originWidth) / 2 / scale;
                var scaleOffsetHeight = (originHeight - scale * originHeight ) / 2 / scale;
                var coefficient = 14.2;
                var fixedWidth = originHeight / coefficient / scale;
                var fixedHeight = originWidth / coefficient / scale;

                //mlgbd ie 的修正值.都要考虑scale的影响.所以,所有修正系数都要和scale重新计算后再进行修正.

                var marginLeft = (originWidth - el.offsetWidth)/2 + scaleOffsetWidth - fixedWidth;
                var marginTop = (originHeight - el.offsetHeight)/2  + scaleOffsetHeight - fixedHeight;
                //  el.style.marginLeft = marginLeft + 'px';
                //el.style.marginTop = marginTop   + 'px'

              } 
    };
    var el = document.getElementById('fuck');
    var angle = 0;
    document.onclick  = function  () {
      timer = setInterval(function  () {
        angle += 10;
          if(angle === 360){
            angle = 0;
            clearInterval(timer);
          }
          rotateAndScale(el, angle, 1);
      }, 50)
    };



</script>

【贵妃】教主Franky
2014/4/6 12:27:09
你看 现在ie6 往左上偏 ,ie8往右下偏

就是因为用的right, bottom定位...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@RubyLouvre