查看效果:http://keleyi.com/a/bjad/tc1y11dy.htm
Chrome效果图：
火狐效果图：
推荐：http://hovertree.com/texiao/css3/18/
以下是源码：
1 <!doctype html> 2 <html> 3 <head> 4 <title>HTML5 随机弹跳的小球-柯乐义</title> 5 <style> 6 body{ 7 font-family: 微软雅黑; 8 } 9 body,h1{ 10 margin:0; 11 } 12 canvas{ 13 display:block;margin-left: auto;margin-right: auto; 14 border:1px solid #DDD; 15 background: -webkit-linear-gradient(top, #222,#111); 16 } 17 </style> 18 </head> 19 <body> 20 <h1>柯乐义 HTML5特效 随机弹跳的小球</h1> 21 <div>请使用支持HTML5的浏览器开打本页。<a href="http://keleyi.com/a/bjad/tc1y11dy.htm" target="_blank">原文</a> <button id="stop-keleyi-com">暂停</button> 22 <button id="run-keleyi-com">继续</button> 23 <button id="addBall-keleyi-com">增加小球</button> <button onclick="javascript:window.location.reload();">刷新</button> 24 <br />每次刷新页面的小球大小，颜色，运动路线，都是新的，可以点击上面各个按钮看看效果。 25 </div> 26 <canvas id="canvas-keleyi-com" > 27 28 </canvas> 29 30 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"></script> 31 <script type="text/javascript"> 32 var nimo = { 33 aniamted: null, 34 content: null, 35 data: { 36 radiusRange: [5, 20], 37 speedRange: [-5, 5], 38 scrollHeight: null, 39 scrollWdith: null 40 }, 41 balls: [], 42 ele: { 43 canvas: null 44 }, 45 fn: { 46 creatRandom: function (startInt, endInt) {//生产随机数 47 var iResult; 48 iResult = startInt + (Math.floor(Math.random() * (endInt - startInt + 1))); 49 return iResult 50 }, 51 init: function () { 52 nimo.data.scrollWdith = document.body.scrollWidth; 53 nimo.data.scrollHeight = document.body.scrollHeight; 54 nimo.ele.canvas = document.getElementById('canvas-ke'+'leyi-com'); 55 nimo.content = nimo.ele.canvas.getContext('2d'); 56 nimo.ele.canvas.width = nimo.data.scrollWdith - 50; 57 nimo.ele.canvas.height = nimo.data.scrollHeight - 100; 58 }, 59 addBall: function () { 60 var aRandomColor = []; 61 aRandomColor.push(nimo.fn.creatRandom(0, 255)); 62 aRandomColor.push(nimo.fn.creatRandom(0, 255)); 63 aRandomColor.push(nimo.fn.creatRandom(0, 255)); 64 var iRandomRadius = nimo.fn.creatRandom(nimo.data.radiusRange[0], nimo.data.radiusRange[1]); 65 var oTempBall = { 66 coordsX: nimo.fn.creatRandom(iRandomRadius, nimo.ele.canvas.width - iRandomRadius), 67 coordsY: nimo.fn.creatRandom(iRandomRadius, nimo.ele.canvas.height - iRandomRadius), 68 radius: iRandomRadius, 69 bgColor: 'rgba(' + aRandomColor[0] + ',' + aRandomColor[1] + ',' + aRandomColor[2] + ',0.5)' 70 }; 71 oTempBall.speedX = nimo.fn.creatRandom(nimo.data.speedRange[0], nimo.data.speedRange[1]); 72 if (oTempBall.speedX === 0) { 73 oTempBall.speedX = 1 74 } 75 if (oTempBall.speedY === 0) { 76 oTempBall.speedY = 1 77 } 78 oTempBall.speedY = nimo.fn.creatRandom(nimo.data.speedRange[0], nimo.data.speedRange[1]); 79 nimo.balls.push(oTempBall) 80 }, 81 drawBall: function (bStatic) { 82 var i, iSize; 83 nimo.content.clearRect(0, 0, nimo.ele.canvas.width, nimo.ele.canvas.height) 84 for (var i = 0, iSize = nimo.balls.length; i < iSize; i++) { 85 var oTarger = nimo.balls[i]; 86 nimo.content.beginPath(); 87 nimo.content.arc(oTarger.coordsX, oTarger.coordsY, oTarger.radius, 0, 10); 88 nimo.content.fillStyle = oTarger.bgColor; 89 nimo.content.fill(); 90 if (!bStatic) { 91 if (oTarger.coordsX + oTarger.radius >= nimo.ele.canvas.width) { 92 oTarger.speedX = -(Math.abs(oTarger.speedX)) 93 } 94 if (oTarger.coordsX - oTarger.radius <= 0) { 95 oTarger.speedX = Math.abs(oTarger.speedX) 96 } 97 if (oTarger.coordsY - oTarger.radius <= 0) { 98 oTarger.speedY = Math.abs(oTarger.speedY) 99 } 100 if (oTarger.coordsY + oTarger.radius >= nimo.ele.canvas.height) { 101 oTarger.speedY = -(Math.abs(oTarger.speedY)) 102 } 103 oTarger.coordsX = oTarger.coordsX + oTarger.speedX; 104 oTarger.coordsY = oTarger.coordsY + oTarger.speedY; 105 } 106 } 107 }, 108 run: function () { 109 nimo.fn.drawBall(); 110 nimo.aniamted = setTimeout(function () { 111 nimo.fn.drawBall(); 112 nimo.aniamted = setTimeout(arguments.callee, 10) 113 }, 10) 114 }, 115 stop: function () { 116 clearTimeout(nimo.aniamted) 117 } 118 } 119 } 120 window.onload = function () { 121 nimo.fn.init(); 122 var i; 123 for (var i = 0; i < 10; i++) { 124 nimo.fn.addBall(); 125 } 126 nimo.fn.run(); 127 document.getElementById('stop-kel'+'eyi-com').onclick = function () { 128 nimo.fn.stop() 129 } 130 document.getElementById('run-keley'+'i-com').onclick = function () { 131 nimo.fn.stop() 132 nimo.fn.run() 133 } 134 document.getElementById('addBall-k'+'eleyi-com').onclick = function () { 135 var i; 136 for (var i = 0; i < 10; i++) { 137 nimo.fn.addBall(); 138 } 139 nimo.fn.drawBall(true); 140 } 141 } 142 </script> 143 </body> 144 </html>
