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 Flash/MP3/Video多媒体插件
Jan 18 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
javascript实现简易聊天室
Jul 12 Javascript
JS中的const命令你真懂它吗
Mar 08 Javascript
vue实现图片上传到后台
Jun 29 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
phpmyadmin的#1251问题
2006/11/25 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
PHP如何将XML转成数组
2016/04/04 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
JavaScript 对象模型 执行模型
2009/12/06 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
大学自我鉴定
2013/12/20 职场文书
自荐信如何制作?
2014/02/21 职场文书
镇创先争优活动总结
2014/08/28 职场文书
学校捐书活动总结
2015/05/08 职场文书
结婚十年感言
2015/07/31 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
Vue详细的入门笔记
2021/05/10 Vue.js
python 常用的异步框架汇总整理
2021/06/18 Python