元素绕中心旋转

来源:互联网 发布:tcp套接字编程实例 编辑:程序博客网 时间:2024/04/29 21:08

<div style="position:relative; width:438px; height:438px; background-color:#F4F4F4;">
    <div id="wc" style="position:absolute; left:119px; top:73px; width:200px; height:292px;">
        <img src="http://www.cnblogs.com/images/cnblogs_com/wentomi/Untitled-2.jpg">
    </div>
</div>
<script type="text/javascript">
//progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')

var Revolve = {
   
    object : null
   
    , init : function (o, w) {
        this.object = o;
        this.width = w;
       
        o.style.filter = "progid:DXImageTransform.Microsoft.Matrix()";
        //设置滤镜的属性值
        o.filters.item("DXImageTransform.Microsoft.Matrix").SizingMethod = "auto expand";
        o.filters.item("DXImageTransform.Microsoft.Matrix").FilterType = "bilinear";
               
    }
   
    , revolve : function (n, f) {
        var o = this.object, r, sin, cos;
       
        n = (n + f) % 360;
       
        r = n / (360 / (Math.PI * 2));
       
        sin = Math.sin(r), cos = Math.cos(r);
       
        with (o.filters.item("DXImageTransform.Microsoft.Matrix")) {
            M11 = cos, M12 = -sin, M21 = sin, M22 = cos;
        }
       
        with (o.style) {
            left = this.width / 2 - o.offsetWidth / 2;
            top = this.width / 2 - o.offsetHeight / 2;
        }
       
        return n;
    }
   
};

window.onload = function () {
   
    if (!/MSIE/.test(window.navigator.userAgent)) return;
   
    var o = document.getElementById("wc"), n = 0;
   
    Revolve.init(o, 438);
   
    o.timer = window.setInterval(function () {
        n = Revolve.revolve(n, 20);
    }, 50);
};
</script>