用html制作带阴影小球弹跳,jquery制作 随机弹跳的小球特效

以下是源码：

HTML5 随机弹跳的小球

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);

}

HTML5特效 随机弹跳的小球

请使用支持HTML5的浏览器开打本页。 暂停

继续

增加小球 刷新

每次刷新页面的小球大小，颜色，运动路线，都是新的，可以点击上面各个按钮看看效果。

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);

}

}