JS 元素左右晃动

<style type="text/css">
body{margin:0px;padding:0px;}
.top{width:100%;height:25px;background:#eeeeee;border-bottom:1px solid #dcdcdc;}
.box{height:300px;position:absolute;top:20px;width:200px;z-index:10000;-moz-transform:rotate(-3deg);-moz-transform-origin: 50% 0; -webkit-transform:rotate(-3deg);-webkit-transform-origin: 50% 0;}
#left{left:125px;}
#right{right:125px;}
.ico{display:inline;margin-left:25px;bottom:0;height:75px;left:0;position:absolute;width:75px;cursor:move;}
#Lico{background-image:url("xx.png");}
#Rico{background-image:url("xx.png");}
.solid{display:inline;margin-left:25px;background:#EEEEEE;height:240px;left:36px;position:absolute;top:0;width:2px;}
</style>
<div class="box" id="left">
  <div class="solid"></div>
    <div class="ico" id="Lico"></div>
</div>
<div class="box" id="right">
  <div class="solid"></div>
    <div class="ico" id="Rico"></div>
</div>
<script type="text/javascript">
var Rotate = function(obj,path){
    this.target = obj;
    this.path = path || null;
    this.ua = navigator.userAgent;
    this.isIE = null;
    this.oSwitch = true;
    this.oTimer = null;
    this.i = 3;
    this.j = -3;
    if(/msie (\d+\.\d)/i.test(this.ua)){
        this.isIE = document.documentMode || + RegExp['\x241'];
        this.i = 0.001;
        this.j = 0.001;
    }
}
Rotate.prototype = {
    init:function(){
        var self = this;
        if (this.path === "r") {
            this.oTimer = setInterval(function(){self.rotateRight();},30);    
        }else{    
            this.oTimer = setInterval(function(){self.rotateLeft();},30);            
        };
    },
    rotateLeft : function(){
        if (this.isIE) {
            this.ieLeft();
        }else{
            this.left();
        };
    },
    left : function(){
        var self = this.target;
        if(this.oSwitch){
            this.i = this.i-0.15;
            if(this.i<=-3){this.oSwitch = false};
        }else{
            this.i = parseFloat(this.i+0.15);
            if(this.i==3){this.oSwitch = true};
        }
        self.style.MozTransform = 'rotate('+this.i+'deg)';
        self.style.WebkitTransform = 'rotate('+this.i+'deg)';
    },
    ieLeft:function(){
        var self = this.target;
        if(this.oSwitch){
            this.i =  parseFloat(this.i+0.002);
            this.j =  -parseFloat(this.j+0.002);
            if(this.i>=0.1){this.oSwitch = false;}
        }else{
            this.i =  parseFloat(this.i-0.002);
            this.j =  -parseFloat(this.j-0.002);
            if(this.i<=-0.05){this.oSwitch = true;}
        }
        self.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=auto expand,FilterType=bilinear,M11=1,M12='+this.i+',M21='+this.j+',M22=1)';
    },
    rotateRight:function(){
        if (this.isIE) {
            this.ieRight();
        }else{
            this.right();
        };
    },
    right:function(){
        var self = this.target;
        if(this.oSwitch){
            this.j = parseFloat(this.j+0.15);
            if(this.j>=3){this.oSwitch = false};
        }else{
            this.j = parseFloat(this.j-0.15);
            if(this.j<=-3){this.oSwitch = true};
        }
        self.style.MozTransform = 'rotate('+this.j+'deg)';
        self.style.WebkitTransform = 'rotate('+this.j+'deg)';
    },
    ieRight:function(){
        var self = this.target;
        if(this.oSwitch){
            this.i =  parseFloat(this.i+0.002);
            this.j =  -parseFloat(this.j+0.002);
            if(this.i>=0.1){this.oSwitch = false};
        }else{
            this.i =  parseFloat(this.i-0.002);
            this.j =  -parseFloat(this.j-0.002);
            if(this.i<=-0.05){this.oSwitch = true};
        }
        self.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=auto expand,FilterType=bilinear,M11=1,M12='+this.i+',M21='+this.j+',M22=1)';
    }
}
window.onload = function(){
    var oLeft = document.getElementById('left');
    var oRight = document.getElementById('right');
    var l = new Rotate(oLeft);
    l.init();
    var r = new Rotate(oRight,'r');
    r.init();
}
</script>

 

转载于:https://www.cnblogs.com/starweb/archive/2013/01/20/2868609.html