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 相关文章推荐
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
JS实现轮播图效果
Jan 11 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 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
memcache命令启动参数中文解释
2014/01/13 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
Smarty变量用法详解
2016/05/11 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
整理Python 常用string函数(收藏)
2016/05/30 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
Python聊天室程序(基础版)
2018/04/01 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
财务管理专业推荐信
2013/11/19 职场文书
竞争上岗演讲稿
2014/01/05 职场文书
项目投资建议书
2014/05/16 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS