Difference between revisions of "Team:Tongji-Software"

Line 1: Line 1:
−
Laro.register('JxHome', function (La) {
+
<!doctype html>
−
var pkg = this;
+
<html lang="en" class="fullHeight">
−
var bugBalls;
+
<head>
−
this.initStage = function () {
+
<meta charset="UTF-8">
−
var canvas = document.getElementById('canvas');
+
<title>demo</title>
−
canvas.width = window.innerWidth;
+
<link rel="stylesheet" type="text/css" href="sidebar.css">
−
canvas.height = window.innerHeight;
+
</head>  
−
+
<body class="fullHeight">
−
this.canvas = canvas;
+
−
this.stage = new CVS.$stage(canvas);
+
−
this.ctx = this.stage.ctx;
+
−
this.vpx = canvas.width/2;
+
−
this.vpy = canvas.height/2;
+
−
this.normalN = 100;
+
−
this.normalBalls = [];
+
−
this.angleX = 0.001;
+
−
this.angleY = 0.001;
+
−
+
−
this.zstep = 1;
+
−
this.zflag = 1;
+
−
}
+
−
+
−
this.range = function (a, b)
+
−
{
+
−
        return Math.floor(Math.random()*(b-a) + a);
+
−
    }
+
−
+
−
this.tween = function (ball, t)
+
−
{
+
−
if (!ball.end)
+
−
{
+
−
var _x = ball.xpos, _y = ball.ypos, _z = ball.zpos;
+
−
var _t = (+new Date) - ball.startAnimTime;
+
−
ball.xpos = ball.f_xpos + (ball.t_xpos - ball.f_xpos)*Math.sin(Math.PI*_t/(2*t));
+
−
ball.ypos = ball.f_ypos + (ball.t_ypos - ball.f_ypos)*Math.sin(Math.PI*_t/(2*t));
+
−
ball.zpos = ball.f_zpos + (ball.t_zpos - ball.f_zpos)*Math.sin(Math.PI*_t/(2*t));
+
−
+
−
if (_t >= t)
+
−
{
+
−
ball.end = true;
+
−
}
+
−
}
+
−
}
+
−
+
−
this.addNormalBalls = function (n)
+
−
{
+
−
var vpx = this.vpx, vpy = this.vpy, range = this.range, stage = this.stage,
+
−
_this = this;
+
−
if (n) {
+
−
this.normalN = n;
+
−
}
+
−
for (var i=0; i< this.normalN; i++) {
+
  
−
var ball = CVS.createPoint3D(this.stage.ctx, function () {
 
−
                var color = 'rgb('+range(200, 255)+', '+range(40, 255)+', '+range(80, 180)+')';
 
  
−
this.xpos = range(-vpx, vpx);
 
−
this.ypos = range(-vpy, vpy);
 
−
this.zpos = range(-vpx, vpx);
 
  
−
this.width = range(8, 15);
+
<style>
−
this.w = this.width;
+
.move_right {
−
this.draw = function () {
+
-webkit-animation-name : move_right;  
−
this.ctx.beginPath();
+
animation-name : move_right;  
−
this.ctx.arc(0, 0, this.width/2, 0, Math.PI*2, true);
+
-webkit-animation-duration : 1s;
−
this.ctx.closePath();
+
animation-duration : 1s;
−
                    this.ctx.fillStyle = color;
+
-webkit-animation-iteration-count : 1;
−
this.ctx.fill();
+
animation-iteration-count : 1;
−
}
+
-webkit-animation-fill-mode : forwards;
−
});
+
animation-fill-mode : forwards;
−
ball.type = 'normal';
+
}
−
ball.setVanishPoint(vpx, vpy);
+
.move_left {  
−
ball.setCenterPoint(0, 0, 0);
+
-webkit-animation-name : move_left;  
−
stage.addChild(ball);
+
animation-name : move_left;  
−
this.normalBalls.push(ball);
+
-webkit-animation-duration : 1s;  
−
}
+
animation-duration : 1s;  
−
}
+
-webkit-animation-iteration-count : 1;
−
+
animation-iteration-count : 1;
−
this.updateBalls = function (dt, name)  
+
-webkit-animation-fill-mode : forwards;  
−
{
+
animation-fill-mode : forwards;
−
var balls = this.particleHash[name];
+
}  
−
this._updateBalls(dt,balls);
+
.move_up {
−
};
+
-webkit-animation-name : move_up;  
−
+
animation-name : move_up;  
−
this._updateBalls = function (dt,balls)  
+
-webkit-animation-duration : 1s;  
−
{
+
animation-duration : 1s;
−
for (var i = 0; i < balls.length; i ++) {
+
-webkit-animation-iteration-count : 1;
−
var ball = balls[i];
+
animation-iteration-count : 1;
−
+
-webkit-animation-fill-mode : forwards;
−
ball.zpos += JxHome.zstep;
+
animation-fill-mode : forwards;
 +
}
 +
.fadeIn {
 +
-webkit-transform : translateX(120px);  
 +
transform : translateX(120px);  
 +
opacity: 1;
 +
}  
 +
.fadeInUp {
 +
-webkit-transform : translateY(-250px);
 +
transform : translateY(-250px);
 +
opacity: 1;
 +
-webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;  
 +
transition :transform .2s ease-out, opacity .2s ease-out;  
 +
}  
 +
.fadeOutLeft {
 +
-webkit-transform : translateX(-120px);
 +
transform : translateX(-120px);  
 +
opacity: 0.0;  
 +
-webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;  
 +
transition :transform .2s ease-out, opacity .2s ease-out;  
 +
}
 +
</style>
  
−
ball.rotateX(this.angleX);
 
−
ball.rotateY(this.angleY);
 
−
var scale = ball.getScale(),
 
−
pos = ball.getScreenXY();
 
−
ball.width = Math.max(10*scale, 2);
 
−
ball.x = pos.x;
 
−
ball.y = pos.y;
 
−
}
 
−
};
 
  
−
this.pushBalls = function (name)
 
−
{
 
−
var balls = this.particleHash[name];
 
−
for (var i = 0; i < balls.length; i ++) {
 
−
var ball = balls[i];
 
−
JxHome.stage.addChild(ball);
 
−
ball.end = false;
 
−
ball.width = ball.logoPos.width;
 
−
ball.color = 'rgb('+ball.logoPos.r+', '+ball.logoPos.g+', '+ball.logoPos.b+')';
 
−
ball.startAnimTime = (+ new Date);
 
−
 
−
}
 
−
}
 
−
 
−
this.bindStage = function () {
 
−
var _this = this;
 
−
this.stage.addEventListener('mousemove', function (x, y) {
 
−
_this.angleY = (x - _this.vpx) * .00001;
 
−
            _this.angleX = (y - _this.vpy) * .00001;
 
−
});
 
−
}
 
−
 
−
this.initParticles = function ()
 
−
{
 
−
this.qqParticles = this.getParticles('youtext',47,11);
 
−
this.jxParticles = this.getParticles('designIco',29,5);
 
−
this.qplusParticles = this.getParticles('h5ico',28,5);
 
−
this.atParticles = this.getParticles('cs3',21,5);
 
−
 
−
this.particleHash =
 
−
{
 
−
'normal': this.normalBalls,
 
−
'youtext': this.qqParticles,
 
−
'designIco': this.jxParticles,
 
−
'h5ico': this.qplusParticles,
 
−
'cs3': this.atParticles
 
−
}
 
−
}
 
−
 
−
this.getParticles = function (id, w, h, z)
 
−
{
 
−
if (z == undefined) { z = 0; }
 
−
//
 
−
var image = document.getElementById(id);
 
−
//
 
−
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
−
 
−
this.ctx.drawImage(image, 0, 0, w, h, Math.round(this.canvas.width/2-w/2), Math.round(this.canvas.height/2-h/2), w, h);
 
−
 
−
var imageData = this.ctx.getImageData(Math.round(this.canvas.width/2-w/2), Math.round(this.canvas.height/2-h/2), w, h);
 
−
//
 
−
////////////////////////
 
−
var ret = [];
 
−
for (var x = 0; x < imageData.width; x++)
 
−
{
 
−
for (var y = 0; y < imageData.height; y++)
 
−
{
 
−
var i = 4*(y * imageData.width + x);
 
−
                if (imageData.data[i + 3] > 128)
 
−
{
 
−
//------------------------
 
−
var r = imageData.data[i],
 
−
g = imageData.data[i + 1],
 
−
b = imageData.data[i + 2];
 
−
ret.push(new JxHome.Particle(this.stage, this.canvas, id, w, h, x, y, z, r, g, b));
 
−
}
 
−
}
 
−
}
 
−
return ret;
 
−
}
 
−
 
−
this.init = function ()
 
−
{
 
−
this.initStage();
 
−
this.bindStage();
 
−
this.initParticles();
 
−
 
−
JxHome.$fsm.init();
 
−
JxHome.$loop.init();
 
−
}
 
−
});
 
  
−
Laro.register('JxHome', function (La) {
+
<div class='sidebar fullHeight'>sidebar</div>
−
var pkg = this,
+
<div class="controller">
−
range = JxHome.range,
+
<div>
−
vpx = JxHome.vpx,
+
<button onclick="fadeIn()">淡进</button>
−
vpy = JxHome.vpy;
+
<button onclick="fadeOut()">淡出</button>
−
+
</div>
−
this.Particle = function (stage, canvas, id, w, h, x, y, z, r, g, b) {
+
<div>
−
this.canvas = canvas;
+
<button onclick="fadeInUp()">向上淡进</button>
−
+
<button onclick="fadeOutLeft()">向左淡出</button>
−
var vpx = canvas.width/2,
+
</div>
−
vpy = canvas.height/2;
+
</div>
 +
<script src="sidebarEffects.js"></script>
 +
</body>
 +
</html>
  
−
var ball =  CVS.createPoint3D(stage.ctx, function ()
 
−
{
 
−
var color = 'rgb('+ range(200, 255) +', '+ range(200, 255) +', '+ range(200, 255) +')';
 
−
var a = Math.PI * 2 * Math.random();
 
−
            var b = Math.PI * 2 * Math.random();
 
−
var r = range(vpx, vpy);
 
  
−
this.xpos = Math.sin(a) * Math.sin(b) * r;
 
−
this.ypos = Math.cos(a) * Math.sin(b) * r;
 
−
this.zpos = -Math.abs(Math.cos(b) * r);
 
−
 
−
this.width = range(3, 15);
 
−
this.color = color;
 
−
this.draw = function ()
 
−
{
 
−
this.ctx.beginPath();
 
−
this.ctx.arc(0, 0, this.width/2, 0, Math.PI*2, true);
 
−
this.ctx.closePath();
 
−
                    this.ctx.fillStyle = this.color;
 
−
this.ctx.fill();
 
−
}
 
−
});
 
  
−
ball.logoPos =
 
−
{//影响粒子密度
 
−
x: (x-w/2)*11,
 
−
y: (y-h/2)*11,
 
−
z: Math.round((1100-this.canvas.width)/5),
 
−
width: 10,
 
−
r: r,
 
−
g: g,
 
−
b: b
 
−
};
 
−
 
−
ball.f_xpos = ball.xpos;
 
−
ball.f_ypos = ball.ypos;
 
−
ball.f_zpos = ball.zpos;
 
−
ball.t_xpos = ball.logoPos.x;
 
−
ball.t_ypos = ball.logoPos.y;
 
−
ball.t_zpos = ball.logoPos.z;
 
−
 
−
ball.startAnimTime = (+new Date);
 
−
ball.end = true;
 
−
ball.type = id;
 
−
 
−
ball.setVanishPoint(canvas.width/2, canvas.height/2);
 
−
ball.setCenterPoint(0, 0, z);
 
−
 
−
ball.moveX = 1 - Math.random()*2;
 
−
return ball;
 
−
}
 
−
});
 
  
−
Laro.register('JxHome.$states', function (La) {
 
−
var pkg = this;
 
−
 
−
this.No = La.BaseState.extend(function () {
 
−
 
−
}).methods({
 
−
enter: function (msg, fromState)
 
−
{
 
−
this._t = 0;
 
−
JxHome.addNormalBalls();
 
−
},
 
−
leave: function ()
 
−
{
 
−
 
−
},
 
−
update: function (dt) {
 
−
this._t += dt;
 
−
JxHome.updateBalls(dt, 'normal');
 
−
},
 
−
transition: function () {
 
−
if (this._t > 2) {
 
−
this.host.setState(1);
 
−
}
 
−
},
 
−
draw: function () {
 
−
 
−
}
 
−
});
 
−
 
−
this.QQ = La.BaseState.extend(function () {
 
−
 
−
}).methods({
 
−
enter: function (msg, fromState)
 
−
{
 
−
this.push = false;
 
−
this._t = 0;
 
−
this.explosion = false;
 
−
},
 
−
leave: function ()
 
−
{
 
−
for (var i = 0; i < JxHome.stage.children.length; i++)
 
−
{
 
−
var ball = JxHome.stage.children[i];
 
−
//ball.type == 'cs3' 在循环时清除最后一组粒子，非常重要!!!!
 
−
if (ball.type == 'normal' || ball.type == 'cs3' )
 
−
{
 
−
JxHome.stage.children.splice(i, 1);
 
−
i --;
 
−
}
 
−
}
 
−
},
 
−
update: function (dt)
 
−
{
 
−
this._t += dt;
 
−
JxHome.updateBalls(dt, 'normal');
 
−
if(JxHome.bugBalls)JxHome._updateBalls(dt, JxHome.bugBalls);
 
−
//最后一组动画停滞BUG
 
−
 
−
//////////
 
−
////////
 
−
////
 
−
if (this._t > 2 && !this.push)
 
−
{
 
−
JxHome.pushBalls('youtext');
 
−
this.push = true;
 
−
}
 
−
//
 
−
if (this.push)
 
−
{
 
−
    for (var i = 0; i < JxHome.qqParticles.length; i ++)
 
−
    {
 
−
    var ball = (JxHome.qqParticles[i]);
 
−
 
−
    JxHome.tween(ball, 1000);
 
−
    ball.zpos += JxHome.zstep;
 
−
 
−
    ball.rotateX(JxHome.angleX);
 
−
    ball.rotateY(JxHome.angleY);
 
−
    var scale = ball.getScale(),
 
−
    pos = ball.getScreenXY();
 
−
 
−
    ball.width = Math.max(10*scale, 2);
 
−
    ball.x = pos.x;
 
−
    ball.y = pos.y;
 
−
    }
 
−
}
 
−
},
 
−
transition: function ()
 
−
{
 
−
var range = JxHome.range,
 
−
vpx = JxHome.vpx,
 
−
vpy = JxHome.vpy;
 
−
if (this._t > 5 && !this.explosion)
 
−
{
 
−
for (var i = 0; i < JxHome.qqParticles.length; i ++)
 
−
{
 
−
var ball = JxHome.qqParticles[i];
 
−
ball.f_xpos = ball.xpos;
 
−
ball.f_ypos = ball.ypos;
 
−
ball.f_zpos = ball.zpos;
 
−
ball.t_xpos = range(-vpx, vpx);
 
−
ball.t_ypos = range(-vpy, vpy);
 
−
ball.t_zpos = range(-vpx, vpx);
 
−
 
−
ball.end = false;
 
−
ball.width = range(8, 15);
 
−
ball.startAnimTime = (+ new Date);
 
−
}
 
−
this.explosion = true;
 
−
this.explosionT = (+new Date);
 
−
}
 
−
if (this.explosion && (+new Date) - this.explosionT >= 1000) {
 
−
this.host.setState(2);
 
−
}
 
−
},
 
−
draw: function () {
 
−
 
−
}
 
−
});
 
−
 
−
this.Jx = La.BaseState.extend(function () {
 
−
 
−
}).methods({
 
−
enter: function (msg, fromState) {
 
−
//console.log('designIco')
 
  
−
this.push = false;
+
<script>
−
this._t = 0;
+
var sidebarEl = document.querySelector(".sidebar");  
−
this.explosion = false;
+
function fadeIn (e) {  
−
},
+
sidebarEl.className = 'sidebar fullHeight';  
−
leave: function () {
+
sidebarEl.style.top = '0px';  
−
for (var i = 0; i < JxHome.stage.children.length; i ++) {
+
sidebarEl.style.left = '0px';  
−
var ball = JxHome.stage.children[i];
+
sidebarEl.classList.add('move_right');  
−
if (ball.type == 'youtext') {
+
}  
−
JxHome.stage.children.splice(i, 1);
+
function fadeOut (e) {  
−
i --;
+
sidebarEl.className = 'sidebar fullHeight';
−
}
+
sidebarEl.style.left = '120px';  
−
}
+
sidebarEl.classList.add('move_left');  
−
},
+
}  
−
update: function (dt) {
+
function fadeInUp(e) {  
−
this._t += dt;
+
sidebarEl.className = 'sidebar fullHeight';  
−
JxHome.updateBalls(dt, 'youtext');
+
sidebarEl.style.top = '250px';
−
+
sidebarEl.style.left = '120px';  
−
if (this._t > 2 && !this.push) {
+
sidebarEl.classList.add('move_up');  
−
JxHome.pushBalls('designIco');
+
}  
−
this.push = true;
+
function fadeOutLeft(e) {  
−
}
+
sidebarEl.className = 'sidebar fullHeight';  
−
if (this.push) {
+
sidebarEl.style.top = '0px';  
−
for (var i = 0; i < JxHome.jxParticles.length; i ++)
+
sidebarEl.style.left = '120px';  
−
{
+
sidebarEl.classList.add('move_left');  
−
var ball = (JxHome.jxParticles[i]);
+
}  
−
 
+
</script>
−
JxHome.tween(ball, 1000);
+
−
ball.zpos += JxHome.zstep;
+
−
+
−
ball.rotateX(JxHome.angleX);
+
−
ball.rotateY(JxHome.angleY);
+
−
var scale = ball.getScale(),
+
−
pos = ball.getScreenXY();
+
−
+
−
ball.width = Math.max(10*scale, 2);
+
−
ball.x = pos.x;
+
−
ball.y = pos.y;
+
−
}
+
−
}
+
−
+
−
// explosion
+
−
//this.checkExplosion();
+
−
},
+
−
transition: function ()  
+
−
{
+
−
var range = JxHome.range,
+
−
vpx = JxHome.vpx,
+
−
vpy = JxHome.vpy;
+
−
if (this._t > 5 && !this.explosion) {
+
−
for (var i = 0; i < JxHome.jxParticles.length; i ++) {
+
−
var ball = JxHome.jxParticles[i];
+
−
 
+
−
ball.f_xpos = ball.xpos;
+
−
ball.f_ypos = ball.ypos;
+
−
ball.f_zpos = ball.zpos;
+
−
ball.t_xpos = range(-vpx, vpx);
+
−
ball.t_ypos = range(-vpy, vpy);
+
−
ball.t_zpos = range(-vpx, vpx);
+
−
+
−
ball.end = false;
+
−
ball.width = range(8, 15);
+
−
ball.startAnimTime = (+ new Date);
+
−
}
+
−
this.explosion = true;
+
−
this.explosionT = (+new Date);
+
−
}
+
−
if (this.explosion && (+new Date) - this.explosionT >= 1000) {
+
−
this.host.setState(3);
+
−
}
+
−
},
+
−
draw: function () {
+
−
+
−
}
+
−
});
+
−
+
−
this.QPlus = La.BaseState.extend(function () {
+
−
+
−
}).methods({
+
−
enter: function (msg, fromState) {
+
−
this.push = false;
+
−
this._t = 0;
+
−
this.explosion = false;
+
−
},
+
−
leave: function () {
+
−
for (var i = 0; i < JxHome.stage.children.length; i ++) {
+
−
var ball = JxHome.stage.children[i];
+
−
if (ball.type == 'designIco') {
+
−
JxHome.stage.children.splice(i, 1);
+
−
i --;
+
−
}
+
−
}
+
−
},
+
−
update: function (dt) {
+
−
this._t += dt;
+
−
JxHome.updateBalls(dt, 'designIco');
+
−
+
−
if (this._t > 2 && !this.push) {
+
−
JxHome.pushBalls('h5ico');
+
−
this.push = true;
+
−
}
+
−
+
−
if (this.push) {
+
−
for (var i = 0; i < JxHome.qplusParticles.length; i ++)
+
−
{
+
−
var ball = (JxHome.qplusParticles[i]);
+
−
 
+
−
JxHome.tween(ball, 1000);
+
−
ball.zpos += JxHome.zstep;
+
−
+
−
ball.rotateX(JxHome.angleX);
+
−
ball.rotateY(JxHome.angleY);
+
−
var scale = ball.getScale(),
+
−
pos = ball.getScreenXY();
+
−
+
−
ball.width = Math.max(10*scale, 2);
+
−
ball.x = pos.x;
+
−
ball.y = pos.y;
+
−
}
+
−
}
+
−
//this.checkExplosion();
+
−
},
+
−
transition: function () {
+
−
var range = JxHome.range,
+
−
vpx = JxHome.vpx,
+
−
vpy = JxHome.vpy;
+
−
if (this._t > 5 && !this.explosion) {
+
−
for (var i = 0; i < JxHome.qplusParticles.length; i ++) {
+
−
var ball = JxHome.qplusParticles[i];
+
−
 
+
−
ball.f_xpos = ball.xpos;
+
−
ball.f_ypos = ball.ypos;
+
−
ball.f_zpos = ball.zpos;
+
−
ball.t_xpos = range(-vpx, vpx);
+
−
ball.t_ypos = range(-vpy, vpy);
+
−
ball.t_zpos = range(-vpx, vpx);
+
−
+
−
ball.end = false;
+
−
ball.width = range(8, 15);
+
−
ball.startAnimTime = (+ new Date);
+
−
}
+
−
this.explosion = true;
+
−
this.explosionT = (+new Date);
+
−
}
+
−
if (this.explosion && (+new Date) - this.explosionT >= 1000) {
+
−
this.host.setState(4);
+
−
}
+
−
},
+
−
draw: function () {
+
−
+
−
}
+
−
});
+
−
+
−
this.AT = La.BaseState.extend(function () {
+
−
+
−
}).methods({
+
−
enter: function (msg, fromState)
+
−
{
+
−
this.push = false;
+
−
this._t = 0;
+
−
this.explosion = false;
+
−
},
+
−
 
+
−
leave: function ()
+
−
{
+
−
    for (var i = 0; i < JxHome.stage.children.length; i ++) {
+
−
var ball = JxHome.stage.children[i];
+
−
if (ball.type == 'h5ico')
+
−
{
+
−
JxHome.stage.children.splice(i, 1);
+
−
i --;
+
−
}
+
−
}
+
−
},
+
−
+
−
update: function (dt)
+
−
{
+
−
this._t += dt;
+
−
JxHome.updateBalls(dt, 'h5ico');
+
−
+
−
if (this._t > 2 && !this.push)
+
−
{
+
−
JxHome.pushBalls('cs3');
+
−
this.push = true;
+
−
}
+
−
+
−
if (this.push)
+
−
{
+
−
for (var i = 0; i < JxHome.atParticles.length; i ++)
+
−
{
+
−
var ball = (JxHome.atParticles[i]);
+
−
+
−
JxHome.tween(ball, 1000);
+
−
ball.zpos += JxHome.zstep;
+
−
+
−
ball.rotateX(JxHome.angleX);
+
−
ball.rotateY(JxHome.angleY);
+
−
var scale = ball.getScale(),
+
−
pos = ball.getScreenXY();
+
−
 
+
−
ball.width = Math.max(10*scale, 2);
+
−
ball.x = pos.x;
+
−
ball.y = pos.y;
+
−
}
+
−
}
+
−
//this.checkExplosion();
+
−
},
+
−
transition: function()  
+
−
{
+
−
var range = JxHome.range,
+
−
vpx = JxHome.vpx,
+
−
vpy = JxHome.vpy;
+
−
if(this._t > 5 && !this.explosion)
+
−
{
+
−
for (var i = 0; i < JxHome.atParticles.length; i ++)
+
−
{
+
−
var ball = JxHome.atParticles[i];
+
−
+
−
ball.f_xpos = ball.xpos;
+
−
ball.f_ypos = ball.ypos;
+
−
ball.f_zpos = ball.zpos;
+
−
ball.t_xpos = range(-vpx, vpx);
+
−
ball.t_ypos = range(-vpy, vpy);
+
−
ball.t_zpos = range(-vpx, vpx);
+
−
+
−
ball.end = false;
+
−
ball.width = range(8, 15);
+
−
ball.startAnimTime = (+ new Date);
+
−
}
+
−
this.explosion = true;
+
−
this.explosionT = (+new Date);
+
−
}
+
−
if (this.explosion && (+new Date) - this.explosionT >= 1000)
+
−
{
+
−
//
+
−
if (this._t > 7)
+
−
{
+
−
//解决最后一组动画停滞BUG
+
−
JxHome.bugBalls = JxHome.particleHash['cs3'];
+
−
//循环实现，重新获取粒子地图数据
+
−
JxHome.initParticles();
+
−
//回到第一组动画
+
−
this.host.setState(1);
+
−
    }
+
−
}
+
−
},
+
−
draw: function () {
+
−
+
−
}
+
−
});
+
−
});
+
−
 
+
−
Laro.register('JxHome.$fsm', function (La)
+
−
{
+
−
var pkg = this;
+
−
+
−
this.init = function ()
+
−
{
+
−
this.getStatesList();
+
−
this.$ = new La.AppFSM(this, this.statesList);
+
−
this.$.setState(0);
+
−
}
+
−
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+
−
this.getStatesList = function ()
+
−
{
+
−
this.statesList = [
+
−
0, JxHome.$states.No,
+
−
1, JxHome.$states.QQ,
+
−
2, JxHome.$states.Jx,
+
−
3, JxHome.$states.QPlus,
+
−
4, JxHome.$states.AT
+
−
];
+
−
}
+
−
+
−
this.setState = function (state, msg, suspendCurrent)
+
−
{
+
−
this.$.setState(state, msg, suspendCurrent);
+
−
}
+
−
});
+
−
 
+
−
Laro.register('JxHome.$loop', function (La)  
+
−
{
+
−
var pkg = this;
+
−
+
−
this.init = function () {
+
−
this.$ = new La.Loop(this.looper, this);
+
−
}
+
−
+
−
this.looper = function (dt)
+
−
{
+
−
this.update(dt);
+
−
this.draw();
+
−
}
+
−
this.update = function (dt) {
+
−
JxHome.$fsm.$.update(dt);
+
−
if (JxHome.zstep > 2 || JxHome.zstep < -2)
+
−
{
+
−
JxHome.zflag *= -1;
+
−
}
+
−
JxHome.zstep += JxHome.zflag*0.01;
+
−
}
+
−
this.draw = function ()
+
−
{
+
−
JxHome.ctx.clearRect(0, 0, JxHome.canvas.width, JxHome.canvas.height);
+
−
JxHome.stage.render();
+
−
JxHome.$fsm.$.draw();
+
−
}
+
−
});
+
−
///////////////////////////////////////////////////////////////////////////////
+
−
window.onload = function ()
+
−
{
+
−
JxHome.init();
+
−
}
+
−
$(window).resize(function() {
+
−
window.location.href = "index.html";
+
−
});
+

Revision as of 13:54, 4 October 2018

<!doctype html> demo

sidebar



<script> var sidebarEl = document.querySelector(".sidebar"); function fadeIn (e) { sidebarEl.className = 'sidebar fullHeight'; sidebarEl.style.top = '0px'; sidebarEl.style.left = '0px'; sidebarEl.classList.add('move_right'); } function fadeOut (e) { sidebarEl.className = 'sidebar fullHeight'; sidebarEl.style.left = '120px'; sidebarEl.classList.add('move_left'); } function fadeInUp(e) { sidebarEl.className = 'sidebar fullHeight'; sidebarEl.style.top = '250px'; sidebarEl.style.left = '120px'; sidebarEl.classList.add('move_up'); } function fadeOutLeft(e) { sidebarEl.className = 'sidebar fullHeight'; sidebarEl.style.top = '0px'; sidebarEl.style.left = '120px'; sidebarEl.classList.add('move_left'); } </script>