查看效果:http://keleyi.com/a/bjad/tc1y11dy.htm

Chrome效果图：

火狐效果图：

推荐：http://hovertree.com/texiao/css3/18/

以下是源码：

 <!doctype html>

 <html>

 <head>

 <title>HTML5 随机弹跳的小球-柯乐义</title>

 <style>

 body{

 font-family: 微软雅黑;

 }

 body,h1{

 margin:0;

 }

 canvas{

 display:block;margin-left: auto;margin-right: auto;

 border:1px solid #DDD;

 background: -webkit-linear-gradient(top, #222,#111);

 }

 </style>

 </head>

 <body>

 <h1>柯乐义 HTML5特效 随机弹跳的小球</h1>

 <div>请使用支持HTML5的浏览器开打本页。<a href="http://keleyi.com/a/bjad/tc1y11dy.htm" target="_blank">原文</a> <button id="stop-keleyi-com">暂停</button>

 <button id="run-keleyi-com">继续</button>

 <button id="addBall-keleyi-com">增加小球</button> <button onclick="javascript:window.location.reload();">刷新</button>

 <br />每次刷新页面的小球大小，颜色，运动路线，都是新的，可以点击上面各个按钮看看效果。

 </div>

 <canvas id="canvas-keleyi-com" >

 </canvas>

 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"></script>

 <script type="text/javascript">

 var nimo = {

 aniamted: null,

 content: null,

 data: {

 radiusRange: [5, 20],

 speedRange: [-5, 5],

 scrollHeight: null,

 scrollWdith: null

 },

 balls: [],

 ele: {

 canvas: null

 },

 fn: {

 creatRandom: function (startInt, endInt) {//生产随机数

 var iResult;

 iResult = startInt + (Math.floor(Math.random() * (endInt - startInt + 1)));

 return iResult

 },

 init: function () {

 nimo.data.scrollWdith = document.body.scrollWidth;

 nimo.data.scrollHeight = document.body.scrollHeight;

 nimo.ele.canvas = document.getElementById('canvas-ke'+'leyi-com');

 nimo.content = nimo.ele.canvas.getContext('2d');

 nimo.ele.canvas.width = nimo.data.scrollWdith - 50;

 nimo.ele.canvas.height = nimo.data.scrollHeight - 100;

 },

 addBall: function () {

 var aRandomColor = [];

 aRandomColor.push(nimo.fn.creatRandom(0, 255));

 aRandomColor.push(nimo.fn.creatRandom(0, 255));

 aRandomColor.push(nimo.fn.creatRandom(0, 255));

 var iRandomRadius = nimo.fn.creatRandom(nimo.data.radiusRange[0], nimo.data.radiusRange[1]);

 var oTempBall = {

 coordsX: nimo.fn.creatRandom(iRandomRadius, nimo.ele.canvas.width - iRandomRadius),

 coordsY: nimo.fn.creatRandom(iRandomRadius, nimo.ele.canvas.height - iRandomRadius),

 radius: iRandomRadius,

 bgColor: 'rgba(' + aRandomColor[0] + ',' + aRandomColor[1] + ',' + aRandomColor[2] + ',0.5)'

 };

 oTempBall.speedX = nimo.fn.creatRandom(nimo.data.speedRange[0], nimo.data.speedRange[1]);

 if (oTempBall.speedX === 0) {

 oTempBall.speedX = 1

 }

 if (oTempBall.speedY === 0) {

 oTempBall.speedY = 1

 }

 oTempBall.speedY = nimo.fn.creatRandom(nimo.data.speedRange[0], nimo.data.speedRange[1]);

 nimo.balls.push(oTempBall)

 },

 drawBall: function (bStatic) {

 var i, iSize;

 nimo.content.clearRect(0, 0, nimo.ele.canvas.width, nimo.ele.canvas.height)

 for (var i = 0, iSize = nimo.balls.length; i < iSize; i++) {

 var oTarger = nimo.balls[i];

 nimo.content.beginPath();

 nimo.content.arc(oTarger.coordsX, oTarger.coordsY, oTarger.radius, 0, 10);

 nimo.content.fillStyle = oTarger.bgColor;

 nimo.content.fill();

 if (!bStatic) {

 if (oTarger.coordsX + oTarger.radius >= nimo.ele.canvas.width) {

 oTarger.speedX = -(Math.abs(oTarger.speedX))

 }

 if (oTarger.coordsX - oTarger.radius <= 0) {

 oTarger.speedX = Math.abs(oTarger.speedX)

 }

 if (oTarger.coordsY - oTarger.radius <= 0) {

 oTarger.speedY = Math.abs(oTarger.speedY)

 }

 if (oTarger.coordsY + oTarger.radius >= nimo.ele.canvas.height) {

 oTarger.speedY = -(Math.abs(oTarger.speedY))

 }

 oTarger.coordsX = oTarger.coordsX + oTarger.speedX;

 oTarger.coordsY = oTarger.coordsY + oTarger.speedY;

 }

 }

 },

 run: function () {

 nimo.fn.drawBall();

 nimo.aniamted = setTimeout(function () {

 nimo.fn.drawBall();

 nimo.aniamted = setTimeout(arguments.callee, 10)

 }, 10)

 },

 stop: function () {

 clearTimeout(nimo.aniamted)

 }

 }

 }

 window.onload = function () {

 nimo.fn.init();

 var i;

 for (var i = 0; i < 10; i++) {

 nimo.fn.addBall();

 }

 nimo.fn.run();

 document.getElementById('stop-kel'+'eyi-com').onclick = function () {

 nimo.fn.stop()

 }

 document.getElementById('run-keley'+'i-com').onclick = function () {

 nimo.fn.stop()

 nimo.fn.run()

 }

 document.getElementById('addBall-k'+'eleyi-com').onclick = function () {

 var i;

 for (var i = 0; i < 10; i++) {

 nimo.fn.addBall();

 }

 nimo.fn.drawBall(true);

 }

 }

 </script>

 </body>

 </html>

web前端：http://www.cnblogs.com/jihua/p/webfront.html

HTML5 随机弹跳的小球的更多相关文章

  1. html5 方框内的小球

    html5 方框内的小球 版本一 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  2. HTML5 Canvas绚丽的小球详解

    实例说明: 实例使用HTML5+CSS+JavaScript实现小球的运动效果 掌握Canvas的基本用法 技术要点: 从需求出发 分析Demo要实现的功能 擅于使用HTML5 Canvas 参考手册 ...

  3. 【webGl】threejs实现一个简单的动画-弹跳的小球

    在这里,我们将动态画面简称为动画(animation).正如动画片的原理一样,动画的本质是利用了人眼的视觉暂留特性,快速地变换画面,从而产生物体在运动的假象.而对于Three.js程序而言,动画的实现 ...

  4. 第八讲：HTML5中canvas实现小球击打小方块游戏

    源码:http://download.csdn.net/detail/liumingm900913/7469969 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样能够控制画布居中的位置 ...

  5. html5随机背景颜色

    <script>var colors=['red','blue','green','orange','yellow'];    function bcolor(){        var ...

  6. Web前端资源汇总

    本文地址:http://www.cnblogs.com/jihua/p/webfront.html 网页特效库 2017新年快乐特效 CSS3+jQuery实现时钟插件 Html5入门实例" ...

  7. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

  8. 站点建设10个最好的响应的HTML5滑块插件

    大多数的最佳响应的HTML5滑块插件能够使用移动应用程序,站点建设项目,以及Web开发项目提供一些令人兴奋的功能,如无限的动画效果,百分之中的一个百响应布局设计和很多其它. 1.别急!慢慢来 功能丰富 ...

  9. TWaver3D入门探索——3D拓扑图之绽放的小球花

    这样一簇绚烂丰满艳丽多姿的3D小球花,要多少代码才能完成?其实不足百行,您信吗?下面咱就看一下具体实现过程,让您分分钟学会用TWaver HTML5制作3D拓扑图. 搭建3D空间 首先为花簇的绽放建一 ...

随机推荐

  1. ng2048源码阅读

    ng2048源码阅读 Tutorial: http://www.ng-newsletter.com/posts/building-2048-in-angularjs.html Github: http ...

  2. JQuery插件之Jquery.datatables.js用法及api

    1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk ...

  3. 自用迷你版的Deferred

    啥也不说贴代码,项目用 /** * 迷你版的deferred */ function Deferred(func) { if (this instanceof Deferred === false) ...

  4. VB.NET 如何进行调用HTTP外部接口

    直接上干货  Private Function POST(ByVal URL$, ByVal data$) Dim http On Error Resume Next http = CreateObj ...

  5. File类使用小结

    一.构造函数 File(String pathname):根据参数转换为抽象路径名创建File实例 File(String parent,String filename):根据parent和filen ...

  6. 创建第二个 vlan network "vlan101" - 每天5分钟玩转 OpenStack（96）

    前面我们创建了 vlan100,并部署了 instance,今天将继续创建第二个 vlan network "vlan101". subnet IP 地址为 172.16.101. ...

  7. 浅谈webWorker

    一.webWorker之初体验 在"setTimeout那些事儿"中,说到JavaScript是单线程.也就是同一时间只能做同一事情. 也好理解,作为浏览器脚本语言,如果JavaS ...

  8. EntityFramework 如何查看执行的 SQL 代码？

    在 VS 调试的时候,如果我们项目中使用的是 EntityFramework,查看 SQL 执行代码就不像 ADO.NET 那样直观了,我们需要设置下,可以参考下: How can I log the ...

  9. EasyUI+MVC+EF简单用户管理Demo（问题及解决）

    写在前面 iframe-src EntityFramework版本 connectionStrings View.Action.页面跳转 EasyUI中DataGrid绑定 新增.修改和删除数据 效果 ...

  10. Java位运算总结-leetcode题目

    按位操作符只能用于整数基本数据类型中的单个bit中,操作符对应表格: Operator Description & 按位与(12345&1=1,可用于判断整数的奇偶性) | 按位或 ^ ...