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 setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
javascript字符串函数汇总
Dec 06 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
tracking.js实现前端人脸识别功能
Apr 16 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
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
JS中的作用域链
2017/03/01 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
js module大战
2019/04/19 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
Python进程间通信用法实例
2015/06/04 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
Python中字符串与编码示例代码
2019/05/20 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
Python中的整除和取模实例
2020/06/03 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
高二美术教学反思
2014/01/14 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
四年级数学教学反思
2014/02/02 职场文书
模特大赛策划方案
2014/05/28 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
店铺转让协议书
2014/12/02 职场文书
先进个人自荐书
2015/03/06 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
java开发双人五子棋游戏
2022/05/06 Java/Android
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android