<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>