以下是源码:

复制代码 代码如下:
 <!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="/UploadFiles/2021-04-02/jquery-1.11.0.min.js">  <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>

标签:
jquery,随机,弹跳,小球

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com

评论“jquery制作 随机弹跳的小球特效”

暂无“jquery制作 随机弹跳的小球特效”评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?