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 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
在JavaScript中监听IME键盘输入事件
May 29 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
Js实现自定义右键行为
Mar 26 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
jQuery之动画效果大全
Nov 09 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 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
fgetcvs在linux的问题
2012/01/15 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
php缓存技术详细总结
2013/08/07 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
javascript 特殊字符串
2009/02/25 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
python 切片和range()用法说明
2013/03/24 Python
Python自动重试HTTP连接装饰器
2015/04/28 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
python打开windows应用程序的实例
2019/06/28 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
美德好少年事迹材料
2014/01/19 职场文书
计算机专业自荐信
2015/03/05 职场文书
初中语文教学随笔
2015/08/15 职场文书
大学学生会竞选稿
2015/11/19 职场文书
Python常遇到的错误和异常
2021/11/02 Python