查看效果: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. Struts框架

    Struts是最早的Java开源框架之一,它是MVC设计模式的一个优秀实现. Struts定义了通用的Controller(控制器),通过配置文件(通常是 Struts -config.xml) Ec ...

  2. SSIS Design1: 源数据提取

    数据量的大小由两个方面决定:行的宽度和数据行的数量,为了减少ETL运行的时间,可以从源数据的提取上做优化,从数据源的输入上控制数据的质量和大小,减少转换和IO. 一,减少行的宽度 1,只加载需要的数据 ...

  3. ExtJs4之TreePanel

    Tree介绍 树形结构,是程序开发,不可缺少的组件之一.ExtJs中的树,功能强大美观实用.功能齐全,拖拉,排序,异步加载等等. 在ExtJs4中Tree和Grid具有相同的父类,因此Grid具有的特 ...

  4. 【Win10 应用开发】自适应Toast通知的XML文档结构

    老规矩,在开始之前老周先讲个故事. 话说公元2015年7月20日,VS 2015发布.于是,肯定有人会问老周了,C#6有啥新特性,我学不来啊.学不来的话你应该检讨.老周比较保守地计算一下,学会C# 6 ...

  5. 感恩回馈，新鲜出炉的《ASP.NET MVC 5框架揭秘》免费赠送

    上次针对<ASP.NET Web API 2框架揭秘>举办了一次评论赠书活动,很多人问我相同的活动要不要针对<ASP.NET MVC 5框架揭秘>(阅读样章)再来一次,为此我向 ...

  6. 创建第一个 local network（II）- 每天5分钟玩转 OpenStack（81）

    上一节通过 Web GUI 创建了 “first_local_net”,本节我们需要搞清楚底层网络结构有了哪些变化? 点击 “first_local_net” 链接,显示 network 的 subn ...

  7. 引用类型-RegExp类型

    JavaScript高级程序设计(第三版)笔记-第五章-RegExp类型 定义正则表达式有两种方式 1.用字面量形式定义正则表达式: ver expression = /patterns/flags; ...

  8. 看懂mysql执行计划--官方文档

    原文地址:https://dev.mysql.com/doc/refman/5.7/en/explain-output.html 9.8.2 EXPLAIN Output Format The EXP ...

  9. 移动端上传照片 预览+Draw on Canvas's Demo（解决 iOS 等设备照片旋转 90 度的 bug）

    背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...

  10. 从零开始学 Java - Spring 集成 ActiveMQ 配置（二）

    从上一篇开始说起 上一篇从零开始学 Java - Spring 集成 ActiveMQ 配置(一)文章中讲了我关于消息队列的思考过程,现在这一篇会讲到 ActivMQ 与 Spring 框架的整合配置 ...