jquery 製作 隨機彈跳的小球特效_jquery

以下是原始碼：

複製程式碼 程式碼如下:

 
 
 
 
 
 
 
 

HTML5特效 随机弹跳的小球

 

请使用支持HTML5的浏览器开打本页。 暂停
 继续
 增加小球 刷新
 
每次刷新页面的小球大小，颜色，运动路线，都是新的，可以点击上面各个按钮看看效果。
 

 
 畫布>
 
 
 var if = {
 給定：null，
 內容：空，
 資料：{
 半徑範圍：[ 5 , 20 ] ,
 速度範圍: [-5, 5],
 滾動高度：空，
 滾動寬度：空
 },
 球：[]，
 即：{
 畫布：空
 },
 fn: {
 createRandom : function ( startInt , endInt ) { // CreateRandom
 var iResult;
 iResult = startInt ( Math . Floor ( Math . random () * ( endInt - startInt 1 )) );  回 iResult
 },
 初始化：函數（）{
 資料 .scrollWidth = 文件 .scrollWidth ;  資料 .scrollHeight = 文件 .scrollHeight ;  nimo.ele.canvas = document.getElementById('canvas-that' 'this-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 : 函數 ( ) {
 var aRandomColor = [];
 aRandomColor . Push ( nimo . fn . createRandom ( 0 , 255 ) );  aRandomColor . Push ( nimo . fn . createRandom ( 0 , 255 ) );  aRandomColor . Push ( nimo . fn . createRandom ( 0 , 255 ) );  var iRandomRadius = nimo.fn.creatRandom(nimo.data.radiusRange[0], nimo.data.radiusRange[1]);
 var oTempBall = {
 coordsX: nimo.fn.createRandom(iRandomRadius, nimo.ele.canvas.width - iRandomRadius),
 coordsY: nimo.fn.createRandom(iRandomRadius, nimo.ele.canvas.height - iRandomRadius),
 半徑：iRandomRadius，
 bgColor: 'rgba('aRandomColor[0]','aRandomColor[1]','aRandomColor[2]',0.5)'
 };
 oTempBall.speedX = nimo.fn.createRandom(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.createRandom(nimo.data.speedRange[0], nimo.data.speedRange[1]);
 nimo.balls.push(或TempBall)
 },
 drawBall : 函數 ( 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  var oTarger = nimo.balls[i];
 nimo.content.beginPath();
 nimo . 內容 . 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  oTarger.speedX = Math.abs(oTarger.speedX)
 }
 if ( oTarger . coordsY -- oTarger . radius  oTarger.speedY = Math.abs(oTarger.speedY)
 }
 if ( oTarger . coordsY oTarger . radius > ;= nimo . ele . canvas . height ) {
 oTarger . speedY = -( 數學 .abs ( oTarger . speedY ) )
 }
 oTarger.coordsX = oTarger.coordsX oTarger.speedX;
 oTarger.coordsY = oTarger.coordsY oTarger.speedY;
 }
 }
 },
 運轉：函數（）{
 if.fn.drawBall();
 nimo . 已知 = setTimeout ( 函數 ( ) {
 if.fn.drawBall();
 nimo . 已知 = setTimeout ( 參數 . call , 10 )
 }, 10)
 },
 停止：函數（）{
 clearTimeout ( nimo .whatyougave )
 }
 }
 }
 視窗 .onload = 函數 () {
 nimo.fn.init();
 var i;
 for ( var i = 0 ; i  if.fn.addBall();
 }
 nimo.fn.run();
 document.getElementById('stop-only' 'this-com').onclick = function() {
 nimo.fn.stop()
 }
 document.getElementById('run-keley' 'i-com').onclick = function() {
 nimo.fn.stop()
 nimo.fn.run()
 }
 document.getElementById('addBall-this-com').onclick = function() {
 var i;
 for ( var i = 0 ; i  if.fn.addBall();
 }
 尼莫 . 畫球 ( true );  }
 }
 腳本>
 身體>