js实现网页各个元素分离分崩离析相互碰撞动画效果代码
代码语言:html
所属分类:其他
代码描述:js实现网页各个元素分离分崩离析相互碰撞动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { margin: 0; overflow: hidden; background-color: #ffffff; font-family: Arial, sans-serif; user-select: none; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; } button { height: 29px; padding: 0 8px; color: #444; background-color: #f4f4f4; border: 1px solid #d9d9d9; border-radius: 2px; font-family: Arial, sans-serif; font-size: 11px; font-weight: bold; text-align: center; cursor: pointer; } button:hover { color: #222; background-color: #f8f8f8; -webkit-linear-gradient(top,#f8f8f8,#f1f1f1) border: 1px solid #c6c6c6; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1) } #topbar { width: 100%; color: #BBB; font-size: 13px; font-weight: bold; line-height: 27px; border-spacing: 0px; white-space: nowrap; } #topbar tr { width: 100%; margin: 0px; padding: 0px; } #topbar td { height: 28px; margin: 0px; background-color: #2d2d2d; white-space: nowrap; cursor: pointer; } #topbar td:hover { color: #FFF; } #topbar td.selected { color: #FFF; } #topbar td.empty { cursor: auto; } #topbar td.empty:hover { background-color: #2d2d2d; } #topbar td span { display: block; padding: 1px 8px 0px 10px; } #content { width: 100%; text-align: center; margin-top: 162px; white-space: nowrap; } #content #logo { margin-bottom: 17px; } #content input { width: 560px; padding: 4px 9px; margin-bottom: 16px; font: 16px arial,sans-serif; border: 1px solid #d9d9d9; border-top-color: #c0c0c0; color: #000000; } #content input:hover { border: 1px solid #b9b9b9; border-top-color: #a0a0a0; } #content input:focus { outline: 0; /* this removes browser-side outline */ border-color: #4d90fe; } #bottombar { position: absolute; bottom: 30px; width: 100%; height: 1px; line-height: 0px; border-spacing: 0px; } #bottombar tr { width: 100%; margin: 0px; padding: 0px; } #bottombar td { height: 1px; margin: 0px; padding: 0px; background-color: #ebebeb; } #footer { position: absolute; right: 50px; bottom: 10px; width: 100%; font-size: 13px; text-align: right; white-space: nowrap; } #footer * { margin: 0px 9px; } #footer a { color: #666; text-decoration: none; } #footer a:hover { text-decoration: underline; } .result { width: 546px; } .result .title { color: #2200C1; font-size: 16px; font-weight: normal; } .result .title a:active { color: #2200C1; } .result .url { color: #0e774a; font-size: 13px; } .result .content { font-size: 13px; } </style> </head> <body> <table id="topbar"> <tr> <td class="box2d" onClick="location.href = 'https://plus.google.com/?gpsrc=ogpy0&tab=wX';"><span>+You</span></td> <td class="box2d selected" onClick="location.href = 'http://www.google.com/webhp?hl=en&tab=ww';"><span>Search</span></td> <td class="box2d" onClick="location.href = 'http://www.google.com/imghp?hl=en&tab=wi';"><span>Images</span></td> <td class="box2d" onClick="location.href = 'http://maps.google.com/maps?hl=en&tab=wl';"><span>Maps</span></td> <td class="box2d" onClick="location.href = 'https://play.google.com/?hl=en&tab=w8';"><span>Play</span></td> <td class="box2d" onClick="location.href = 'http://www.youtube.com/?tab=w1';"><span>YouTube</span></td> <td class="box2d" onClick="location.href = 'http://news.google.com/nwshp?hl=en&tab=wn';"><span>News</span></td> <td class="box2d" onClick="location.href = 'https://mail.google.com/mail/?tab=wm';"><span>Gmail</span></td> <td class="box2d" onClick="location.href = 'https://drive.google.com/?tab=wo';"><span>Drive</span></td> <td class="box2d" onClick="location.href = 'https://www.google.com/calendar?tab=wc';"><span>Calendar</span></td> <td class="box2d" onClick="location.href = 'http://www.google.com/intl/en/options/';"><span>More</span></td> <td class="box2d empty" style="width:10%"><span> </span></td> <td class="box2d empty" style="width:20%"><span> </span></td> <td class="box2d empty" style="width:20%"><span> </span></td> <td class="box2d empty" style="width:10%"><span> </span></td> <td class="box2d empty" style="width:5%"><span> </span></td> <td class="box2d empty" style="width:5%"><span> </span></td> <td class="box2d empty" style="width:20%"><span> </span></td> </tr> </table> <span style="position:absolute;top:50px;right:30px;"><button id="btnG" class="box2d" style="color:#fff;font-size:11px;font-weight:bold;padding: 0 16px;border:1px solid transparent;background-color:#d14836;text-transform: uppercase;">Sign in</button></span> <div id="content"> <img id="logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARMAAABfCAMAAAD8mtMpAAAC/VBMVEUBIrIZH6qfBSGwAyWSDiTEAym9DifSCyysGCiQISvJES3eDDLMFinYGDDdFyzkGjbmGzGhMTePNjwsSa3JKDQYTukOZh3iKDKKQUPvKzHwKjnoLUDFODyxQUTAQEPuNT3kOEDeO0anS0xJYKH2OTf0Oz6fVVY5aN3zRErSXAD3SkflUE2cZmTgU1tGg1DAYV32U1HXXVyVcG60aGO1cSLOcAKfeEncbgD4YVaugED5Z1+1enfNfxGqf3x5ibPjfACgh168hTKXi3nJfHuih4WdjXP5dGnJih7mhQDvenOKla2ck5Bcqm7wjwDnkQhxne++llbfiYa6m1/JmkHyioDwmQDZnSe+nZnnoA7Wmpb6nwDyoQy+p3jTqUa5qpD5pgDoqB+5q6v4npH/rgCps834rxD/tADiuDvWs7D+uQ3/wCLiwXTPwqSZ1az+xjWw0rvjyYrg0K722YvH6tL35bX98tT99uEAQOKlpqNIh/03dPsAVP1UivYqSvC7vLnn6ebr7ert8Pjw8+8iYvojXvr19/P5+/j3+/4aReoAR/Gwsq50f5sMrBcAsBgvbvwGtCGkvvYSTfgANtvGx8QCLMLP0M0AS+3W2NV9qPnQ3Pnd39zY4PY0Wcf529fj5OErZu4yZPIjaPwbPOI8ff0AS/VGascSV/mNsvgAL8yYm5f///9ZcrKUlZstV9NueZ778vFfcacaMdHwrqcYPdABN9THyM8IdwW/y+domfj608cpUdQiUt8jSOZjdKBaie3x5cQHjhg1a+336OVvh8UAgQzxo56xtcUQML9Marmcu/mAoeUAkw4jljYJQe2kvOv+zETk6fm5z/ogUfUZVuyFiZc2VrJNyWJKf/g1c/MAmwgjRrXsysYEpSUpQOcRdyP546X41HgdQsP7zlc/rlHyzGf1uLCssLWPn8rc7+NkiNnKzt6JvJUApRP2xr/g4el/hpoJbBf9+eq14cGJ2JWXm6oAcwwNM7UZuRego6hLfk8+W6gDnxBSZZpfieJCd+r6gHrQAAAYHUlEQVR42u2de1xTV7bHMyBggURaZSxoVVT6sDqiTsdqrbQztkUdsQ+pVdrS1sKo9XrnYecEkCQk5CRBSyEhCQQIECA8FAHBkQpSwQeoRYGUIULVaq223lrqHcfrtcLnrnVOgDzOCSrMZ1Dv+qPtxyY5+3z3b6291tr7HDkl96dJ//F3K/tv8k6+y7lPifwP2qeffgL2w/H/0omHi4ksPqM1uTCtum7r1q3V1WmFJ/ZmxMvuASLfIZFP+5icOlQs0EmHhUl8+tE6c1JurkSSACaR5OQkxcTEdNQdO5EhG+lI/v7NN198sZ1mcvzQ/yZq70gmLEzi0wvzknITjLGxKSlx+XH5+XGalFhjgiQnqR7AbC3cGz+SoYh1KoFA8NV2ZHL80D+L1XeGhJFJfPLWmKSE2FiNonZfZsGOHeU7mgoya+RyRVyKUZKTnVRfn20+lkGOWCakWAT21fZPPoVY8ref+PqSoTKJT46OyTXG5strCnZ9yU8UCFRogovXyjNr5Yr8tgRJdlJ2do6kZ690JIuF3L4dZPLzgb+dSRQOkYmsdWseaCROk7lrZ6JArROKxJSJhHqt6uLBfYRcoTFBcJEkGDW9l6UjmcknyOT4oTMC0dCYtKRFx0hAI6Xb+AK1XiwlbSQp1O05WEM0K9pMgEShIGqPiUasB5GfDhMTEElMQqy8srxYoBVJmTxVv6eJAK3ExSmaCYNSWfojeX8zkR0FvzGmyPd9yVcLpWzxS3epkiBOnzYYqiqKinaoxCOYySdDZhJfCEhi84n2nQJneR8pPFJqIJRKIJJ6i6++r5nI0hBJHNFeLNA7dwjxnkwgkpqaup+vEpH3MRNZ4dZoCxLhYPcp1RYAksb9I1cl1LrzySfbh8QEYkl0jDGO6Nw5OBKA8n1RauOukYyEZjI0nSRvjc5L0BCV3YM5DmXpFUXXt41oJMPAJB2Q5MYSRDlfdxtIZKUV57bdaWX1b2Lyt7tlEl+NwUROdN5evZSRfOSGYGQjGTqTo7TnVO0S3FZtQIq0WuGIrnaoegdj7IG7ZZIRjZ4DMuFrb+9OSSlZUnJ/M0mLjo5JiCOq9t/x1+9bJunRHZRMzu1US/+fCc2kMA8qP4gmNxP1wzemsoasrM+6uj7Laii7vS9c/fzs1xfOnzx5/sLXZz8fum/STE45YVLW8Nm3uw8f3n0lq8yBSUt0Xh4uOhXbhq2gK7vywctBM8CCgoKenrXq24bBbvHqlgubN/bZZrALWwaTrKwlvbU1OfmoxQrR0tJWrqw+0dLHZDs7k7IsaoRBtK3qKrNlkpyXZ5ag69zQDk/kzPrg2RmB06f7gQUGznjyyaAnA1Z1ObvFq38+CUQiI997773IyA0bLGTOip0Mp6U1ra7DnJfXEQ3WkWeOScqRGDUKhYLovRxP9jH5gYVJ2ZWXZ+AQwWCAQUFPPvn0FakVE1l1HnYICOXY4XGdrFVBM6b7jZ84e9682XMCfPz8Jz8JNmFOFtsdXj0LRCIj33z9pWI+/92333jLgmXDyc9ZQMpaq5NwQ0GSmxsTA1wASW6CMQWAEKXLBFqRhcl2NiafgUSmT5/4GIxw4ni/QGqAk+f0i5lTkgHRJKlNQVRNG45Vp+zwQiAyZd4SfiI2cgWrJ/lRVCZMnrCGed4/Po9IXnmJL1Br9Xq9Ti14JzKKhrLhI6avyFqjcxNi27KfeCKnLdYoyY6JQSQ1vr6Vlef2F1uQAJMfWJiUgYynT59Ej1Dw/hw/fxTzZP/JfVrmlCTHxMTgqlNVPgzhJGspXG/87OWJKq2QauPq1aun+PhPnjBhwuQxc5hKqbMnT26MfOsFuBchFVhJqUi76T2KyoYNUX9wLEhbVsJwfZu6+YmJideaNG1tIBfwm4LiG2CJ/c0wmslxRyYNOMQpc/GCOEKhdvUUnLTJ/j5TLFA4JdUxMUkYTqp2DX0lvvIyqGT8XL5K3z/BUqFqoo+PP0AZ4xPgGGtpJC/x1VY3T4o2vRcRtQEsap0DlNatMZLYzC/5Kp1eKNRrj+yLy481ouMUqHV6/UB2jUx+YNBJlmWI6r7ODylcDxqZPHmMj89EetI4smhgkpACTLqHHGKv2F+PbkGpA3x8xkwGJj4B9hUmINkMKuHbFU/iTeERUVEboqLWRbxjC6UVM+7MYoGOhk6K9pTKFfkpKfkKosfmk8AE7NQhOyYWJDYFrHg9uLe/jw+PN5v6CU5LUlJSrlFDEFXLdENk8hl1vccdegjSLk+ezxgwHy8799mCsSR8gWPXQfzHcFQKMIn4SGSjko6kWNOXVg0N8WWTHKgo5IThoPUnSUTyw/FD/7RhUrb05Wenj59qV8OI5/gDEq6Ht7sAB8JJp5jEAZNruiHGkpfxehOXO4Yl8RqeD0Lx4XF/Zz2ZEF5PbnxrUTFDIBO9iUpBJuGbBv5vxlYsQppsGhrSEwQygTWn9ojV75BfMTE5jNPm7TDELh9A4u3u7jobYXNac3NzJbHwi5XXhrYUl63C63FnMvXpxLO4FBMvD8/1A8O5egE9J3RBIkPsJT8Pj1hHMQl7s9+nZdXRkF1qum1vSVynUORTUAqsWDEygWkLApkk2ntEw3ieh6e7q6vraPxpztE+JlVDZLKbksm45UyRmuzieoFSfHgeHpMGxgPB5OTG8NCXGNc76TsRCAWYrHhb1B9MUCY1drkledkXIgpAMVRZCYWJiWXa5jpcsGw8F5CMdnEZvVoITAqHiQlMwcIZftzHmBM/6Rxg4gM68fBc3TfEq+cpmSziM8d2FMo61MmKVyzeT8tEXmp/CWkPMGmDiELsGABOMfnZlgkEPGraHC64ChzH1cXF5aG52EDipEkgIUQmxLIhxRPw1KDA8d4zBcxJznoehBTUieekvhHhmrMxMvRFlvRZ+ocICkpYSMi79F215uVh/Z7pkFvuVeS3teXLDUTpgAKYmKxaiIvAOLuDBmXfBvEQyahHl/Op0ztWTBYPZS1uWAjX8+N5z2VJcsoCUCg8Lrjt+/S4SZQJuM6LbOnzWQuTFSFv0CNLw/o9hch0wC6rB53kg04qL4oGmPxszwTG+CxIeaLNQYOsVbAMe7iPfmguP1FFr/CctIQEYJIPTMqHkrN9u3BhEFzPcwkb2Ne8MJ5wPdzc59EC/xiRbAgPWcCWPosjKSYrQoIXUR+hMilYIR2ZkCtBJ+A7VVb+z8DkCjKZzptkHXSXAhGe9+jHQSKQ19Jj5xTi0SwKcoFqCEyWPku5jvtytiSni+c1ZgzPC5g8TF8HamF0HXYm5B8svhMc/C7OLJVJteUT+xyF1ZoCTBSEsmLA/x2ZQJ3zbFCg3wCTsisLAyEv8Xxs7vI+idBMko3AxIhMSodQ7zQEBUGpSTFhW6oDIG+jmLiuFlMRdvMgTEr+vM7CZP7rSDo9F5iAomsuOjBpMQITgqgoWtYvU0cmDS/jGP15E+k/aPggCIjwxtlIhGbSajRiuWDrjHdsXXC5GX7IhG3xIucAEy9g4uo6D2f9rygTYBLMzuTzfiYL8FZbJbhCxslrHRdIWXZbiuI0UZHa7YRJ1rPIxIdmkrU00N/PhztpbrGNRGgmGbFtQCWFCrJ3vxjvnjFjRqA/MFnCunitgaWYZjIVr/Pxxs0YTkKDX2RlIo3sY/IihrpWKvJp5MRiR//swDtQFjXu1Dlhgp2/6X68cQL97imYGYybihLRO/QjOPEShJKCq3vB3S88HyAT1MnzrEVTl9cYZALZ4mP4mS1UhyQ8NISdCbmZZjJ//q/xM+kwd8Y2YFLguBjUGaEIrCjq5DuJsZ9hM9TPjztu3pyAWXNmz56JUYTp5BGH7E2JbWsDSRLEvj13HVBWBc4IRCaez7FybRgDUHiYQT+stWayiL2Vdd6GCTV74CPymiMO46xrA9cpSp02sMwyMwkEf/F+Xq1V4dFFBolY+ifH8lNiY2MxNSYu3ZXz4BHipZMDaSZTWRf0soAxwASTIysmEcCE/Vzi1/RabGFC9sai5cvljk6+tQ1lktptnbM5MAnEMQKTeWqhUCQSi6Wsexl78yHhabM4z2CrcfrKarCVlFX39NT19j5R2gpfWgqX8/cb7+H9GPviFYC+AzpxecSKSVhoyLusM3GWYhI8/ynav45q2mD64uLkpfbgZWZYJIpSx1qVCQzxJHA6DBKYTBokEeOUxJugqkxJwZZ37RHRIERy0LLrzebeXnN9do3GYFB+r4YvrfL3RyZc74nsnjALmHDdoKx4HEf+OfbRNkQCk9dZ3Q2ZrEUm9NrUYsqHkWriFPJLdtJqSUCZNHZbXZz86pQ9kxl+/v7AxMNzkMYzp4TswVI7BbsyRJOztlJGta9GI5fLNb4mpGLONtUalMpyqiF0GK6Ga5un52pWT5hDL8UuLjN11LpDMcEgyzptWygm85966gXqI+RKuUKuiFNARNlj+5XkNpTJrUSbXoE9k4ankQlO3HP6wfYB94JEqAaE4rTvEVbltxSaNDU1+/aVZmYWNDWBVupzTAZlRXsxdaTtip8fMuF5ez/HinUpMnEf7TJqCQ7p6ubIqA1RkVSQZbvolihgEgJMLJXsjzVyNBjpEzZXiTfng0ym2bTrHJmUraIHyfUYxHmAibSegoL/sOnK2DHJ2LPn4o1EMIFA8KEpJxs9R1l0iz6d0eCPO1xQ93o/xno9ZOINMnmEHuSFyMioqEinAQWZhIHr/NqyxJIf1kIaRSAW6+arrNqoIIqmweyUOGNS8i0MESeO67FaNNh+cTKFHpxHTsg/ZP20VKQHE1Ihe2+tqabGF5AU7adjKvk05EB4Oe++spfRd6hwYmnpbImIiIyMjAgPDX2DLaCcjYIQCzJZ0Hdb4kvIxEDAeHv7Tyu3VEsURNUtuzOYyOTnU7Z18XgYox9W55OcZmIcSpKnmxUW27eHVVZWP5Mur/X1JfBA6H6LLF7zoQyEwuqsEGM93F1cRlkcQfpeREQE9oxCQ9nWqq+jaNf5bb/2RJcopYBW8nNOIBVZS3J0roao3Ga3WYBMfrZjghPnB0XfGB7XqVCQCXkML4JEQJU9t3XGj9Bo0HNS+5lkcWkm7M5aFgArMcjkUUsPifwoPByoRISHhb7OgvF81LoVwU+h6/Rn7KIjmRUVVTBeRazEXJ2WVh1tTjIqKrsdTtcxMCnZPYZSsw+PN85ZRKHO5IhKDQYaCmC5dBuVYLq8j8kuNdlX4vFoJmzOmjWBWnVG9TfN//oWDSUs7E3mEZIb10WgTGwatmLtsvbKKqASl5Bk7ojuMCeZFLXbEh0yq34mPw0waeDyLHLmzXEy9RQTci/4aB+U2g8Hz/AzNBpfC5M+z+zicrk8MBAKs7PuBia0TPo24D4KCwunhBL2NuMC/nGfTGwCv1Sovri4qb20tLSg15xnjpHkEzcZzpwxMSFf4/F4FihrRM6ZlIgPEgNKMQ3+sFIGhBM7JtLZHh6IhcsW1WfRC7HV3orozVCgAhb2FqNQLlDR5BmH3RipSKdWCWAF7K2PicmBNYfp4AyT75Q0eHL7pbJe7JxJyY/gPQbCEmlNgz6rlOHr61try6REP86DosLlTWS6Q3AdiCaj5lpt5pB/Cl1hofIOg5RRJug5DNs/pFQsEgr3JkiSciRQKC9jUCYyOWXPhFyDY7RQWSN2zoS8XINrHEFDqRlMKRkmkwMTcr2ntzdNZTbDHaJMXEY9aqNy8R9DQkKACmD5o6O2Tq5bC7nJb9jPYp4wJkgkpji5oZyZySlkYrtfLJ4EY+zTymtMZXHZwNly6YeVSqUStEJB0ZwQ3wYTWIo5A0xKxGvc3Dw9KbE4Outh7Jy4PGK3DSp6B6CErEAom8QOnUf0nAVOTrCfaDOaEoxxCqKGIYGwMDlge7acbBjnCWPkeVFUZjmcE2o4DH/U/1yG+MPKCoTSDA4kj9N87/QBrgyLTDjWTEpEv3N3d3OjtGKvyyteXm4UErskQvhGcDAFJSL8T2ImJLbJqd22TpvR6GvUQKH2hONoKSbHjwMUm14E2eVOzRzXCzcmJyy1oZI1i7teJLV6fgeh0FQAikaT7cx/MkwWJDZMSOFzrkCF8qDXyqwvdpiLSB4tVtnvJZP6V4NpKhERF6x4/fU8Ipn/G6cPCMXnUI03TCCyHULgdz9TRA4cOP57G08Wr4cxuuPMeeFOwoRZh7saysCyriyd4uGxHs/BWD3nJT5yrqiPCkDx7WF/hDgDkFSk2jMBKKtHu7q6u4EDcQMGTvVlzcLMZNRcvspxe50Ublo0f35wyIoVayMi/3yV/v8ffx0VAUh+/dtEtbNzfuTKNg1Vu4L52nv7P746APH1p5/O/PPAN//4j//+y3ffWcYjVuEYYZAQWAALcgkICJgA9amH+xJ6H9Aa4Z6CoiLEQlPxrenZy/IYfoYB83qOPRNIM1VTXcGQilcAzEBDQ9fhWVQX9pHlzDdIitSvPkNRCQMqm89/feE8pGprVwQ/80KxYJB3L/xoQo1YqpLvbYD/5asvzvz0SzCgcgjU8sU3/9nnhGI1NUbEgpMHXHjAw83NbfQSOvWzeW5UqlvciFTouAJUfHtPtDhiiT9Rb1HJL36xyy7ki3XvT7XMA/osF9vSIJKHl/BVehZnlOpVr1JaCVmxdi3kcGvXhq0IeeWF4kT1YE9XkXs1loowLk6hsA4q0m++OPPLATtz5leJatHABVePchk92pUi40aZu6ury8y+dz1w7JS8p6kxtR8LelBN77ET/a+zkMla0pN7TNQqDEiud968Zr8MkiLt+4+PcqGweEOM93Zzf5jaVmL3AlKsU727YNEzzwTjKhQSuuiVV3/LF6idPfmBB4aPrqzrrcUEwnAaVkoIK9mX+y8h/f3vf2VjxdZTAtpc8rALZTQZV5eHZoKOLbGL4zC8IzcbU1NTLVhoLr415t66Hmy/1lMLDvoN8Ni1k5/IEAOlIq3q/ecfn/ow2NSpj89djs+zi51OOSnWaze9/eqLlL3+9vsqNeMmg4VHenK1OScBN0OJKiVUhEoKCiilZiDSSoU6G7Nr0UOBIHj+0Ycs9sjM5dZzwHH0b+3F8k4LFpoLbQT9LyW4zbn2W9t28gUwciHjveIT61oVvlxCAB/S6kW3cXyexMf/dVownV4oZv2CLL2wIyfBCJH1tKGy8ty5zs7KIgyAdEwpvf23BUhFetzRoJtkKhyjfR5rS0WnulY+9noqxQXJABo0+I/Kc2Nv7u++kYi/4mTklvRbRO0Y3MFGGonmbNuktTomxxeAVGY2lXdfu3ERbuhGO0AhqLqEMDxxJ+cU8f0XQmySiW1nlsP8YaFWdXHZ/mntYzuvX29sbLx+rnNs+81bu7p34uFjtU4vEv87HmpKr85LSshXEJn7KZWiosC0iytppTQ3GwwHhUMfGIedoV6rtogr0aIw9AOg+m96yEuWHG3Ohip4H75fQjegUnwwHnwcpALuXblH/C9jMlB9CvV0H/ZO/WDYkRRG5yUBkps7Ey3H0AfmT12gJOiIpzyoJ/+VTEaWFUZ31PvKiWnFDImOVNdErwZKZefQn3q+Z5gkR3eYJQpDezFjBUTqD9JMKiqPiB4UJhkdHXk5+YbKLwXMRSEp7EHngdRpmf5BYZKWl1efICfaWZ+TJ3U1qJOiosW6B4RJS4zZnKMhlPtZ91FLyEsUk9RdQ3685B5hklxfnwTRpKLbyb5MS60BW3/bHhQm1Tk5OSaFoWqZkxsmsykm13QPCJNeiUQCuYnS6TNGvdjoun7jQYmxZpPJpAEm+7XOmRSl3rzjV9TdszrRtLUBE0O7k3giy0Emw/Dg+D3CpIdqBRAGZ6fL0uWGCpsjbfc5kxPUERmAwn5oqGQlyKRx2zA8JH2PMIk3GaDsBWtmbQaka4iK1FvDIJN7hQl5jMCyt5lobmZ5x2RLPcikvXg4XkNxr+T2olIltgMMzfLmOqYtyhYzILm9F6ndN0zIy+ew/UngzpPpmD0VWTLuJYzdKdAPR4PnnukVSC/voxrDEFfkGlNdckbf659lLelp2XKDsvJW8fAguYd6SpZdSqDS3Cz39TVl9/bgCfc6s0mDPYKxXzJtvd7nTEqkumWd/Xu3uO+EJm+mOkljtzndVbtvmZSQQvWy9kabfSfcYak6d7Ob3/fakweNCe70qi8untZ5ndq/LSpKbbze2V7efSNRpRUN4xvD7rW/G0Iq0quPLC7fcfNme/vNph2Ll11k3Y18YJggFrFIT++ianV6/b9gu+le/TtESHKwfdS7t/8Dw4+o6YNxgfwAAAAASUVORK5CYII=" width="275" height="95"class="box2d"><br /> <input id="q" value="" title="Search" autocomplete="off" type="text" maxlength="2048" class="box2d"><br /> <span style="margin: 0 4px;"><button id="btnG" class="box2d">Google Search</button></span> <span style="margin: 0 4px;"><button id="btnI" class="box2d">I'm Feeling Lucky</button></span> </div> <table id="bottombar"> <tr> <td class="box2d" style="width:10%"><span> </span></td> <td class="box2d" style="width:12%"><span> </span></td> <td class="box2d" style="width:8%"><span> </span></td> <td class="box2d" style="width:4%"><span> </span></td> <td class="box2d" style="width:4%"><span> </span></td> <td class="box2d" style="width:5%"><span> </span></td> <td class="box2d" style="width:4%"><span> </span></td> <td class="box2d" style="width:2%"><span> </span></td> </tr> </table> <div id="footer"> <a href="http://www.google.com/intl/en/ads/" class="box2d">Advertising Programs</a> <a href="http://www.google.com/services/" class="box2d">Business Solutions</a> <a href="http://www.google.com/intl/en/policies/" class="box2d">Privacy & Terms</a> <a href="https://plus.google.com/116899029375914044550" class="box2d">+Google</a> <a href="http://www.google.com/intl/en/about.html" class="box2d">About Google</a> </div> <!-- <script src="http://www.google.com/uds/api?file=uds.js&v=0.1" type="text/javascript"></script> --> <script> /* Based on Alex Arnell's inheritance implementation. */ var Class = { create: function() { var parent = null, properties = $A(arguments); if (Object.isFunction(properties[0])) parent = properties.shift(); function klass() { this.initialize.apply(this, arguments); } Object.extend(klass, Class.Methods); klass.superclass = parent; klass.subclasses = []; if (parent) { var subclass = function() { }; subclass.prototype = parent.prototype; klass.prototype = new subclass; parent.subclasses.push(klass); } for (var i = 0; i < properties.length; i++) klass.addMethods(properties[i]); if (!klass.prototype.initialize) klass.prototype.initialize = this.emptyFunction; klass.prototype.constructor = klass; return klass; }, emptyFunction:function () {}, }; Class.Methods = { addMethods: function(source) { var ancestor = this.superclass && this.superclass.prototype; var properties = Object.keys(source); if (!Object.keys({ toString: true }).length) properties.push("toString", "valueOf"); for (var i = 0, length = properties.length; i < length; i++) { var property = properties[i], value = source[property]; if (ancestor && Object.isFunction(value) && value.argumentNames().first() == "$super") { var method = value, value = Object.extend((function(m) { return function() { return ancestor[m].apply(this, arguments) }; })(property).wrap(method), { valueOf: function() { return method }, toString: function() { return method.toString() } }); } this.prototype[property] = value; } return this; } }; Object.extend = function(destination, source) { for (var property in source) destination[property] = source[property]; return destination; }; Object.extend(Object, { inspect: function(object) { try { if (Object.isUndefined(object)) return 'undefined'; if (object === null) return 'null'; return object.inspect ? object.inspect() : String(object); } catch (e) { if (e instanceof RangeError) return '...'; throw e; } }, toJSON: function(object) { var type = typeof object; switch (type) { case 'undefined': case 'function': case 'unknown': return; case 'boolean': return object.toString(); } if (object === null) return 'null'; if (object.toJSON) return object.toJSON(); if (Object.isElement(object)) return; var results = []; for (var property in object) { var value = Object.toJSON(object[property]); if (!Object.isUndefined(value)) results.push(property.toJSON() + ': ' + value); } return '{' + results.join(', ') + '}'; }, toQueryString: function(object) { return $H(object).toQueryString(); }, toHTML: function(object) { return object && object.toHTML ? object.toHTML() : String.interpret(object); }, keys: function(object) { var keys = []; for (var property in object) keys.push(property); return keys; }, values: function(object) { var values = []; for (var property in object) values.push(object[property]); return values; }, clone: function(object) { return Object.extend({ }, object); }, isElement: function(object) { return object && object.nodeType == 1; }, isArray: function(object) { return object != null && typeof object == "object" && 'splice' in object && 'join' in object; }, isHash: function(object) { return object instanceof Hash; }, isFunction: function(object) { return typeof object == "function"; }, isString: function(object) { return typeof object == "string"; }, isNumber: function(object) { return typeof object == "number"; }, isUndefined: function(object) { return typeof object == "undefined"; } }); function $A(iterable) { if (!iterable) return []; if (iterable.toArray) return iterable.toArray(); var length = iterable.length || 0, results = new Array(length); while (length--) results[length] = iterable[length]; return results; } if (WebKit = navigator.userAgent.indexOf('AppleWebKit/') > -1) { $A = function(iterable) { if (!iterable) return []; if (!(Object.isFunction(iterable) && iterable == '[object NodeList]') && iterable.toArray) return iterable.toArray(); var length = iterable.length || 0, results = new Array(length); while (length--) results[length] = iterable[length]; return results; }; } </script> <script> /* * Box2Djs (port of Box2DFlash 1.4.3.1) - http://box2d-js.sourceforge.net/ * Single-filed and jsmined ( http://code.google.com/p/jsmin-php/ ) by Mr.doob */ var b2Settings=Class.create();b2Settings.prototype={initialize:function(){}} b2Settings.USHRT_MAX=0x0000ffff;b2Settings.b2_pi=Math.PI;b2Settings.b2_massUnitsPerKilogram=1.0;b2Settings.b2_timeUnitsPerSecond=1.0;b2Settings.b2_lengthUnitsPerMeter=30.0;b2Settings.b2_maxManifoldPoints=2;b2Settings.b2_maxShapesPerBody=64;b2Settings.b2_maxPolyVertices=8;b2Settings.b2_maxProxies=1024;b2Settings.b2_maxPairs=8*b2Settings.b2_maxProxies;b2Settings.b2_linearSlop=0.005*b2Settings.b2_lengthUnitsPerMeter;b2Settings.b2_angularSlop=2.0/180.0*b2Settings.b2_pi;b2Settings.b2_velocityThreshold=1.0*b2Settings.b2_lengthUnitsPerMeter/b2Settings.b2_timeUnitsPerSecond;b2Settings.b2_maxLinearCorrection=0.2*b2Settings.b2_lengthUnitsPerMeter;b2Settings.b2_maxAngularCorrection=8.0/180.0*b2Settings.b2_pi;b2Settings.b2_contactBaumgarte=0.2;b2Settings.b2_timeToSleep=0.5*b2Settings.b2_timeUnitsPerSecond;b2Settings.b2_linearSleepTolerance=0.01*b2Settings.b2_lengthUnitsPerMeter/b2Settings.b2_timeUnitsPerSecond;b2Settings.b2_angularSleepTolerance=2.0/180.0/b2Settings.b2_timeUnitsPerSecond;b2Settings.b2Assert=function(a) {if(!a){var nullVec;nullVec.x++;}}; var b2Vec2=Class.create();b2Vec2.prototype={initialize:function(x_,y_){this.x=x_;this.y=y_;},SetZero:function(){this.x=0.0;this.y=0.0;},Set:function(x_,y_){this.x=x_;this.y=y_;},SetV:function(v){this.x=v.x;this.y=v.y;},Negative:function(){return new b2Vec2(-this.x,-this.y);},Copy:function(){return new b2Vec2(this.x,this.y);},Add:function(v) {this.x+=v.x;this.y+=v.y;},Subtract:function(v) {this.x-=v.x;this.y-=v.y;},Multiply:function(a) {this.x*=a;this.y*=a;},MulM:function(A) {var tX=this.x;this.x=A.col1.x*tX+A.col2.x*this.y;this.y=A.col1.y*tX+A.col2.y*this.y;},MulTM:function(A) {var tX=b2Math.b2Dot(this,A.col1);this.y=b2Math.b2Dot(this,A.col2);this.x=tX;},CrossVF:function(s) {var tX=this.x;this.x=s*this.y;this.y=-s*tX;},CrossFV:function(s) {var tX=this.x;this.x=-s*this.y;this.y=s*tX;},MinV:function(b) {this.x=this.x<b.x?this.x:b.x;this.y=this.y<b.y?this.y:b.y;},MaxV:function(b) {this.x=this.x>b.x?this.x:b.x;this.y=this.y>b.y?this.y:b.y;},Abs:function() {this.x=Math.abs(this.x);this.y=Math.abs(this.y);},Length:function() {return Math.sqrt(this.x*this.x+this.y*this.y);},Normalize:function() {var length=this.Length();if(length<Number.MIN_VALUE) {return 0.0;} var invLength=1.0/length;this.x*=invLength;this.y*=invLength;return length;},IsValid:function() {return b2Math.b2IsValid(this.x)&&b2Math.b2IsValid(this.y);},x:null,y:null};b2Vec2.Make=function(x_,y_) {return new b2Vec2(x_,y_);}; var b2Mat22=Class.create();b2Mat22.prototype={initialize:function(angle,c1,c2) {if(angle==null)angle=0;this.col1=new b2Vec2();this.col2=new b2Vec2();if(c1!=null&&c2!=null){this.col1.SetV(c1);this.col2.SetV(c2);} else{var c=Math.cos(angle);var s=Math.sin(angle);this.col1.x=c;this.col2.x=-s;this.col1.y=s;this.col2.y=c;}},Set:function(angle) {var c=Math.cos(angle);var s=Math.sin(angle);this.col1.x=c;this.col2.x=-s;this.col1.y=s;this.col2.y=c;},SetVV:function(c1,c2) {this.col1.SetV(c1);this.col2.SetV(c2);},Copy:function(){return new b2Mat22(0,this.col1,this.col2);},SetM:function(m) {this.col1.SetV(m.col1);this.col2.SetV(m.col2);},AddM:function(m) {this.col1.x+=m.col1.x;this.col1.y+=m.col1.y;this.col2.x+=m.col2.x;this.col2.y+=m.col2.y;},SetIdentity:function() {this.col1.x=1.0;this.col2.x=0.0;this.col1.y=0.0;this.col2.y=1.0;},SetZero:function() {this.col1.x=0.0;this.col2.x=0.0;this.col1.y=0.0;this.col2.y=0.0;},Invert:function(out) {var a=this.col1.x;var b=this.col2.x;var c=this.col1.y;var d=this.col2.y;var det=a*d-b*c;det=1.0/det;out.col1.x=det*d;out.col2.x=-det*b;out.col1.y=-det*c;out.col2.y=det*a;return out;},Solve:function(out,bX,bY) {var a11=this.col1.x;var a12=this.col2.x;var a21=this.col1.y;var a22=this.col2.y;var det=a11*a22-a12*a21;det=1.0/det;out.x=det*(a22*bX-a12*bY);out.y=det*(a11*bY-a21*bX);return out;},Abs:function() {this.col1.Abs();this.col2.Abs();},col1:new b2Vec2(),col2:new b2Vec2()}; var b2Math=Class.create();b2Math.prototype={initialize:function(){}} b2Math.b2IsValid=function(x) {return isFinite(x);};b2Math.b2Dot=function(a,b) {return a.x*b.x+a.y*b.y;};b2Math.b2CrossVV=function(a,b) {return a.x*b.y-a.y*b.x;};b2Math.b2CrossVF=function(a,s) {var v=new b2Vec2(s*a.y,-s*a.x);return v;};b2Math.b2CrossFV=function(s,a) {var v=new b2Vec2(-s*a.y,s*a.x);return v;};b2Math.b2MulMV=function(A,v) {var u=new b2Vec2(A.col1.x*v.x+A.col2.x*v.y,A.col1.y*v.x+A.col2.y*v.y);return u;};b2Math.b2MulTMV=function(A,v) {var u=new b2Vec2(b2Math.b2Dot(v,A.col1),b2Math.b2Dot(v,A.col2));return u;};b2Math.AddVV=function(a,b) {var v=new b2Vec2(a.x+b.x,a.y+b.y);return v;};b2Math.SubtractVV=function(a,b) {var v=new b2Vec2(a.x-b.x,a.y-b.y);return v;};b2Math.MulFV=function(s,a) {var v=new b2Vec2(s*a.x,s*a.y);return v;};b2Math.AddMM=function(A,B) {var C=new b2Mat22(0,b2Math.AddVV(A.col1,B.col1),b2Math.AddVV(A.col2,B.col2));return C;};b2Math.b2MulMM=function(A,B) {var C=new b2Mat22(0,b2Math.b2MulMV(A,B.col1),b2Math.b2MulMV(A,B.col2));return C;};b2Math.b2MulTMM=function(A,B) {var c1=new b2Vec2(b2Math.b2Dot(A.col1,B.col1),b2Math.b2Dot(A.col2,B.col1));var c2=new b2Vec2(b2Math.b2Dot(A.col1,B.col2),b2Math.b2Dot(A.col2,B.col2));var C=new b2Mat22(0,c1,c2);return C;};b2Math.b2Abs=function(a) {return a>0.0?a:-a;};b2Math.b2AbsV=function(a) {var b=new b2Vec2(b2Math.b2Abs(a.x),b2Math.b2Abs(a.y));return b;};b2Math.b2AbsM=function(A) {var B=new b2Mat22(0,b2Math.b2AbsV(A.col1),b2Math.b2AbsV(A.col2));return B;};b2Math.b2Min=function(a,b) {return a<b?a:b;};b2Math.b2MinV=function(a,b) {var c=new b2Vec2(b2Math.b2Min(a.x,b.x),b2Math.b2Min(a.y,b.y));return c;};b2Math.b2Max=function(a,b) {return a>b?a:b;};b2Math.b2MaxV=function(a,b) {var c=new b2Vec2(b2Math.b2Max(a.x,b.x),b2Math.b2Max(a.y,b.y));return c;};b2Math.b2Clamp=function(a,low,high) {return b2Math.b2Max(low,b2Math.b2Min(a,high));};b2Math.b2ClampV=function(a,low,high) {return b2Math.b2MaxV(low,b2Math.b2MinV(a,high));};b2Math.b2Swap=function(a,b) {var tmp=a[0];a[0]=b[0];b[0]=tmp;};b2Math.b2Random=function() {return Math.random()*2-1;};b2Math.b2NextPowerOfTwo=function(x) {x|=(x>>1)&0x7FFFFFFF;x|=(x>>2)&0x3FFFFFFF;x|=(x>>4)&0x0FFFFFFF;x|=(x>>8)&0x00FFFFFF;x|=(x>>16)&0x0000FFFF;return x+1;};b2Math.b2IsPowerOfTwo=function(x) {var result=x>0&&(x&(x-1))==0;return result;};b2Math.tempVec2=new b2Vec2();b2Math.tempVec3=new b2Vec2();b2Math.tempVec4=new b2Vec2();b2Math.tempVec5=new b2Vec2();b2Math.tempMat=new b2Mat22(); var b2AABB=Class.create();b2AABB.prototype={IsValid:function(){var dX=this.maxVertex.x;var dY=this.maxVertex.y;dX=this.maxVertex.x;dY=this.maxVertex.y;dX-=this.minVertex.x;dY-=this.minVertex.y;var valid=dX>=0.0&&dY>=0.0;valid=valid&&this.minVertex.IsValid()&&this.maxVertex.IsValid();return valid;},minVertex:new b2Vec2(),maxVertex:new b2Vec2(),initialize:function(){this.minVertex=new b2Vec2();this.maxVertex=new b2Vec2();}}; var b2Bound=Class.create();b2Bound.prototype={IsLower:function(){return(this.value&1)==0;},IsUpper:function(){return(this.value&1)==1;},Swap:function(b){var tempValue=this.value;var tempProxyId=this.proxyId;var tempStabbingCount=this.stabbingCount;this.value=b.value;this.proxyId=b.proxyId;this.stabbingCount=b.stabbingCount;b.value=tempValue;b.proxyId=tempProxyId;b.stabbingCount=tempStabbingCount;},value:0,proxyId:0,stabbingCount:0,initialize:function(){}} var b2BoundValues=Class.create();b2BoundValues.prototype={lowerValues:[0,0],upperValues:[0,0],initialize:function(){this.lowerValues=[0,0];this.upperValues=[0,0];}} var b2Pair=Class.create();b2Pair.prototype={SetBuffered:function(){this.status|=b2Pair.e_pairBuffered;},ClearBuffered:function(){this.status&=~b2Pair.e_pairBuffered;},IsBuffered:function(){return(this.status&b2Pair.e_pairBuffered)==b2Pair.e_pairBuffered;},SetRemoved:function(){this.status|=b2Pair.e_pairRemoved;},ClearRemoved:function(){this.status&=~b2Pair.e_pairRemoved;},IsRemoved:function(){return(this.status&b2Pair.e_pairRemoved)==b2Pair.e_pairRemoved;},SetFinal:function(){this.status|=b2Pair.e_pairFinal;},IsFinal:function(){return(this.status&b2Pair.e_pairFinal)==b2Pair.e_pairFinal;},userData:null,proxyId1:0,proxyId2:0,next:0,status:0,initialize:function(){}};b2Pair.b2_nullPair=b2Settings.USHRT_MAX;b2Pair.b2_nullProxy=b2Settings.USHRT_MAX;b2Pair.b2_tableCapacity=b2Settings.b2_maxPairs;b2Pair.b2_tableMask=b2Pair.b2_tableCapacity-1;b2Pair.e_pairBuffered=0x0001;b2Pair.e_pairRemoved=0x0002;b2Pair.e_pairFinal=0x0004; var b2PairCallback=Class.create();b2PairCallback.prototype={PairAdded:function(proxyUserData1,proxyUserData2){return null},PairRemoved:function(proxyUserData1,proxyUserData2,pairUserData){},initialize:function(){}}; var b2BufferedPair=Class.create();b2BufferedPair.prototype={proxyId1:0,proxyId2:0,initialize:function(){}} var b2PairManager=Class.create();b2PairManager.prototype={initialize:function(){var i=0;this.m_hashTable=new Array(b2Pair.b2_tableCapacity);for(i=0;i<b2Pair.b2_tableCapacity;++i) {this.m_hashTable[i]=b2Pair.b2_nullPair;} this.m_pairs=new Array(b2Settings.b2_maxPairs);for(i=0;i<b2Settings.b2_maxPairs;++i) {this.m_pairs[i]=new b2Pair();} this.m_pairBuffer=new Array(b2Settings.b2_maxPairs);for(i=0;i<b2Settings.b2_maxPairs;++i) {this.m_pairBuffer[i]=new b2BufferedPair();} for(i=0;i<b2Settings.b2_maxPairs;++i) {this.m_pairs[i].proxyId1=b2Pair.b2_nullProxy;this.m_pairs[i].proxyId2=b2Pair.b2_nullProxy;this.m_pairs[i].userData=null;this.m_pairs[i].status=0;this.m_pairs[i].next=(i+1);} this.m_pairs[b2Settings.b2_maxPairs-1].next=b2Pair.b2_nullPair;this.m_pairCount=0;},Initialize:function(broadPhase,callback){this.m_broadPhase=broadPhase;this.m_callback=callback;},AddBufferedPair:function(proxyId1,proxyId2){var pair=this.AddPair(proxyId1,proxyId2);if(pair.IsBuffered()==false) {pair.SetBuffered();this.m_pairBuffer[this.m_pairBufferCount].proxyId1=pair.proxyId1;this.m_pairBuffer[this.m_pairBufferCount].proxyId2=pair.proxyId2;++this.m_pairBufferCount;} pair.ClearRemoved();if(b2BroadPhase.s_validate) {this.ValidateBuffer();}},RemoveBufferedPair:function(proxyId1,proxyId2){var pair=this.Find(proxyId1,proxyId2);if(pair==null) {return;} if(pair.IsBuffered()==false) {pair.SetBuffered();this.m_pairBuffer[this.m_pairBufferCount].proxyId1=pair.proxyId1;this.m_pairBuffer[this.m_pairBufferCount].proxyId2=pair.proxyId2;++this.m_pairBufferCount;} pair.SetRemoved();if(b2BroadPhase.s_validate) {this.ValidateBuffer();}},Commit:function(){var i=0;var removeCount=0;var proxies=this.m_broadPhase.m_proxyPool;for(i=0;i<this.m_pairBufferCount;++i) {var pair=this.Find(this.m_pairBuffer[i].proxyId1,this.m_pairBuffer[i].proxyId2);pair.ClearBuffered();var proxy1=proxies[pair.proxyId1];var proxy2=proxies[pair.proxyId2];if(pair.IsRemoved()) {if(pair.IsFinal()==true) {this.m_callback.PairRemoved(proxy1.userData,proxy2.userData,pair.userData);} this.m_pairBuffer[removeCount].proxyId1=pair.proxyId1;this.m_pairBuffer[removeCount].proxyId2=pair.proxyId2;++removeCount;} else {if(pair.IsFinal()==false) {pair.userData=this.m_callback.PairAdded(proxy1.userData,proxy2.userData);pair.SetFinal();}}} for(i=0;i<removeCount;++i) {this.RemovePair(this.m_pairBuffer[i].proxyId1,this.m_pairBuffer[i].proxyId2);} this.m_pairBufferCount=.........完整代码请登录后点击上方下载按钮下载查看
网友评论0