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>
鼠标经过时, 方块会旋转并且移动.
新闻热点
疑难解答
