jquery_jquery によって生成されるランダムに跳ねるボールの特殊効果

以下はソースコードです:

コードをコピー コードは次のとおりです:

 
 
 
 
 
 
 
 

HTML5特效 随机弹跳的小球

 

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

 
 
 
 <スクリプトタイプ="text/javascript">
 var if = {
 指定: null、
 内容: null、
 データ: {
 radiusRange : [ 5 , 20 ] ,
 速度範囲: [-5, 5],
 スクロール高さ : null 、
 スクロール幅: null
 }、
 ボール: []、
 つまり: {
 キャンバス: null
 }、
 fn: {
 createRandom : function ( startInt , endInt ) { // CreateRandom
 var iResult;
 iResult = startInt ( Math .floor ( Math .random () * ( endInt - startInt 1 )) );  iResult
を返す  }、
 init : function ( ) {
 nimo . スクロール幅 = ドキュメント
 nimo . スクロールハイト = ドキュメント
 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 : function ( ) {
 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)
 }、
 ドローボール : 関数 ( 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 . コンテンツ . アーク ( 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 = -( Math .abs ( oTarger .speedY ) )
 }
 oTarger.coordsX = oTarger.coordsX oTarger.speedX;
 oTarger.coordsY = oTarger.coordsY oTarger.speedY;
 }
 }
 }、
 実行: 関数 ( ) {
 if.fn.drawBall();
 nimo . give = setTimeout ( function ( ) {
 if.fn.drawBall();
 nimo . 与えられた = setTimeout (引数 . call , 10 )
 }、10)
 }、
 stop : function ( ) {
 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();
 }
 nimo . fn . ドローボール ( true );  }
 }