jquery制作 随机弹跳的小球特效


Posted in Javascript onFebruary 01, 2015

以下是源码:

 <!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的浏览器开打本页。 <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>
Javascript 相关文章推荐
javascript之学会吝啬 精简代码
Apr 25 Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
完美的js图片轮换效果
Feb 05 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 #Javascript
jquery制作LED 时钟特效
Feb 01 #Javascript
thinkphp 表名 大小写 窍门
Feb 01 #Javascript
javascript实现带节日和农历的日历特效
Feb 01 #Javascript
2种jQuery 实现刮刮卡效果
Feb 01 #Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 #Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 #Javascript
You might like
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
PHP整合PayPal支付
2015/06/11 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
在Linux下调试Python代码的各种方法
2015/04/17 Python
利用Python实现图书超期提醒
2016/08/02 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
python3实现点餐系统
2019/01/24 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
2013年保送生自荐信格式
2013/11/20 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
听证通知书
2015/04/24 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
课程设计感想范文
2015/08/11 职场文书
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技