Js 旋转平滑特效

浏览数：22 / 时间：2015年06月09日

效果图.

源码.

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2 
  3 
  4 <html style="height: 100%;">
  5 <body style="height: 100%;">
  6 
  7 </body>
  8 
  9 <script type="text/javascript">    
 10     // =============================================================================
 11     //    Util.
 12     //
 13     var Util = {
 14         getBody: function() 
 15         {
 16             return document.body;
 17         },
 18         appendToBody: function(tag)
 19         {
 20             this.getBody().appendChild(tag);
 21         },
 22         createShape: function(x, y, width, height) 
 23         {
 24             var div = document.createElement("div");
 25             div.style.position     = "absolute";
 26             div.style.border    = "solid";
 27             div.style.background= "rgb(180, 230, 29)";
 28             //div.style.color        = "rgb(180, 230, 29)";
 29             div.style.left         = x + "px";
 30             div.style.top         = y + "px";        
 31             div.style.width     = width + "px";
 32             div.style.height     = height + "px";
 33             //div.style.webkitTransform = "rotate(70deg)";
 34             return div;
 35         },
 36         equal: function(v1, v2)
 37         {
 38             return Math.abs(v1 - v2) < 0.0001;
 39         },
 40         parseAngle: function(angle)
 41         {
 42             return "rotate(_angledeg)".replace("_angle", angle);
 43         },
 44         parseRect: function(x, y, width, height)
 45         {
 46             var result = "rect(_ypx, _endxpx, _endypx, _xpx)";
 47             result = result.replace("_x", x).replace("_y", y);
 48             result = result.replace("_endx", x + width).replace("_endy", y + height);
 49             return result;
 50         },
 51         getTagPoint: function(tag)
 52         {
 53             return {
 54                 "x": parseInt(tag.style.left.replace("px", "")), 
 55                 "y": parseInt(tag.style.top.replace("px", ""))
 56             };
 57         },
 58         setTagPoint: function(tag, point)
 59         {
 60             tag.style.left = point.x + "px";
 61             tag.style.top = point.y + "px";
 62         }
 63     };    
 64     //
 65     // =============================================================================
 66     
 67     //
 68     //    获取鼠标坐标.
 69     //
 70     var cursor = {
 71         "x": 0, 
 72         "y": 0, 
 73         "setPosition": function(e) 
 74         {
 75             this.x = e.clientX;
 76             this.y = e.clientY;
 77         }
 78     };
 79     // 绑定全局, 获取鼠标坐标.
 80     (
 81         function()
 82         {
 83             Util.getBody().onmousemove = cursor.setPosition;
 84         }
 85     )();
 86     //
 87     // =============================================================================
 88     
 89     // =============================================================================
 90     //    元素信息.
 91     //
 92     function ElementInfo(tag) 
 93     {
 94         var self = this;        
 95         tag.onmousemove = function() { self.step1 = 10; self.step2 = 5; };
 96         this.angle = 0;        
 97         this.step1 = 0;    // 旋转.
 98         this.step2 = 0;    // 移动.
 99         this.tag = tag;
100         Util.appendToBody(tag);    
101     }
102     // 执行旋转.
103     ElementInfo.prototype.onRotate = function()
104     {
105         if ( !Util.equal(this.step1, 0) )
106         {
107             this.angle += this.step1;
108             this.angle = parseInt(this.angle);
109             this.angle = parseInt(this.angle % 360);
110             this.step1 -= 0.05;
111             this.tag.style.webkitTransform = Util.parseAngle(this.angle);
112         }
113     }
114     // 执行移动.
115     ElementInfo.prototype.onMove = function() 
116     {
117         if ( !Util.equal(this.step2, 0) )
118         {
119             var tagPoint = Util.getTagPoint(this.tag);            
120             var toX = this.step2 * Math.sin(3.14 / 180 * this.angle) + tagPoint.x;
121             var toY = this.step2 * Math.cos(3.14 / 180 * this.angle) + tagPoint.y;
122             Util.setTagPoint(this.tag, {"x": toX, "y": toY});
123             this.step2 -= 0.05;
124         }
125     }
126     //
127     // =============================================================================
128     
129     var elements = [];
130     
131     (    
132         function() {
133             var screenWidth = document.documentElement.clientWidth;
134             var screenHeight = document.documentElement.clientHeight;
135             var cellWidth = 50;
136             var cellHeight = 50;
137             var cellNumX = 16;
138             var cellNumY = 6;
139             var viewWidth = cellNumX * cellWidth;
140             var viewHeight = cellNumY * cellHeight;
141             var viewX = parseInt( (screenWidth - viewWidth) / 2);
142             var viewY = parseInt( (screenHeight - viewHeight) / 2);        
143 
144             for (var i = 0; i != cellNumX * cellNumY; ++i)
145             {
146                 var x = viewX + parseInt(i % cellNumX) * cellWidth;
147                 var y = viewY + parseInt(i / cellNumX) * cellHeight;    
148                 
149                 var tag = Util.createShape(x, y, cellWidth, cellHeight);
150                 var ele = new ElementInfo(tag);
151                 elements.push(ele);
152                 
153             }        
154             setInterval(handleLogic, 10);                    
155         }
156     )();
157     
158     function handleLogic()
159     {
160         for (var i in elements)
161         {
162             elements[i].onRotate();
163             elements[i].onMove();
164         }
165     }
166 </script>
167 </html>