HTML5 随机弹跳的小球
查看效果: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 随机弹跳的小球的更多相关文章
- html5 方框内的小球
html5 方框内的小球 版本一 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...
- HTML5 Canvas绚丽的小球详解
实例说明: 实例使用HTML5+CSS+JavaScript实现小球的运动效果 掌握Canvas的基本用法 技术要点: 从需求出发 分析Demo要实现的功能 擅于使用HTML5 Canvas 参考手册 ...
- 【webGl】threejs实现一个简单的动画-弹跳的小球
在这里,我们将动态画面简称为动画(animation).正如动画片的原理一样,动画的本质是利用了人眼的视觉暂留特性,快速地变换画面,从而产生物体在运动的假象.而对于Three.js程序而言,动画的实现 ...
- 第八讲：HTML5中canvas实现小球击打小方块游戏
源码:http://download.csdn.net/detail/liumingm900913/7469969 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样能够控制画布居中的位置 ...
- html5随机背景颜色
<script>var colors=['red','blue','green','orange','yellow']; function bcolor(){ var ...
- Web前端资源汇总
本文地址:http://www.cnblogs.com/jihua/p/webfront.html 网页特效库 2017新年快乐特效 CSS3+jQuery实现时钟插件 Html5入门实例" ...
- jQuery弹出窗口完整代码
jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...
- 站点建设10个最好的响应的HTML5滑块插件
大多数的最佳响应的HTML5滑块插件能够使用移动应用程序,站点建设项目,以及Web开发项目提供一些令人兴奋的功能,如无限的动画效果,百分之中的一个百响应布局设计和很多其它. 1.别急!慢慢来 功能丰富 ...
- TWaver3D入门探索——3D拓扑图之绽放的小球花
这样一簇绚烂丰满艳丽多姿的3D小球花,要多少代码才能完成?其实不足百行,您信吗?下面咱就看一下具体实现过程,让您分分钟学会用TWaver HTML5制作3D拓扑图. 搭建3D空间 首先为花簇的绽放建一 ...
随机推荐
- iOS-多线程基础
进程与线程: 1> 一个应用程序对应一个进程,一个进程帮助程序占据一块存储空间 2> 要想在进程中执行任务,就必须开启线程,一条线程就代表一个任务 3> 一个进程中允许开 ...
- Sql Server系列：数据库操作
1 创建数据库 1.1 CREATE DATABASE语法 CREATE DATABASE database_name [ ON [ PRIMARY ] <filespec> [ ,... ...
- Linq语法详细
闲言碎语 近期比较忙,但还是想写点什么,就分享一些基础的知识给大家看吧,希望能帮助一些linq新手,如果有其它疑问,可以进右上角群,进行交流探讨,谢谢. 开门见山 读这篇文章之前,我先说下,每一种搜索 ...
- WPF DatePicker只显示年和月 修改：可以只显示年
最近的项目,查询时只需要年和月,不需要日,因此需要对原有的DatePicker进行修改,查询了网上的内容,最终从一篇帖子里看到了添加附加属性的方法,地址是http://stackoverflow.co ...
- 传智播客--ADO.net--SqlBulkCopy批量插入数据（小白必知）
一般情况下,我们在向数据库中插入数据时用Insert语句,但是当数据量很大的时候,这种情况就比较缓慢了,这个时候就需要SqlBulkCopy这个类. SqlBulkCopy本身常用的函数有这么几个 D ...
- 前端学PHP之面向对象系列第五篇——对象操作
× 目录 [1]对象克隆 [2]对象比较[3]对象串行化[4]json 前面的话 本文主要介绍面向对象中的一些对象操作 对象克隆 对象复制,又叫对象克隆,可以通过 clone 关键字来完成 在多数情况 ...
- ES6 - Note1：块级作用域与常量
在ES6以前,ES不支持块级作用域,只有全局作用域和函数作用域,所有变量的声明都存在变量声明提升. 1.let 关键字 声明一个块级变量,只在一个代码块中有效,如果在块外面访问便会报错,如下所示: { ...
- linux内核中的每cpu变量
一.linux中的每cpu变量 看linux内核代码的时候,会发现大量的per_cpu(name, cpu),get_cpu_var(name)等出现cpu字眼的语句.从语句的意思可以看出是要使用与当 ...
- Oracle函数之LISTAGG
最近在学习的过程中,发现一个挺有意思的函数,它可实现对列值的拼接.下面我们来看看其具体用法. 用法: 对其作用,官方文档的解释如下: For a specified measure, LISTAGG ...
- JavaScript 框架设计(二)
JavaScript 高级框架设计 (二) 上一篇,JavaScript高级框架设计(一)我们 实现了对tag标签的选择 下来我们实现对id的选择,即id选择器. 我们将上一篇的get命名为getTa ...