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 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
一个取得文件扩展名的函数
2006/10/09 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
PHP时间和日期函数详解
2015/05/08 PHP
php给图片加文字水印
2015/07/31 PHP
php 浮点数比较方法详解
2017/05/05 PHP
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
js验证身份证号码记录的方法
2019/04/26 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
python如何快速拼接字符串
2020/10/28 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
建筑院校毕业生求职信
2014/06/13 职场文书