Difference between revisions of "Team:Tongji-Software"

 
(151 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
Laro.register('JxHome', function (La) {
+
<html>
−
var pkg = this;
+
</script>
−
var bugBalls;
+
−
this.initStage = function () {
+
−
var canvas = document.getElementById('canvas');
+
−
canvas.width = window.innerWidth;
+
−
canvas.height = window.innerHeight;
+
−
+
−
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);
+
<style>
−
this.ypos = range(-vpy, vpy);
+
/**************************************************************************************************************************************************************************************************/
−
this.zpos = range(-vpx, vpx);
+
  
−
this.width = range(8, 15);
 
−
this.w = this.width;
 
−
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 = color;
 
−
this.ctx.fill();
 
−
}
 
−
});
 
−
ball.type = 'normal';
 
−
ball.setVanishPoint(vpx, vpy);
 
−
ball.setCenterPoint(0, 0, 0);
 
−
stage.addChild(ball);
 
−
this.normalBalls.push(ball);
 
−
}
 
−
}
 
−
 
−
this.updateBalls = function (dt, name)
 
−
{
 
−
var balls = this.particleHash[name];
 
−
this._updateBalls(dt,balls);
 
−
};
 
−
 
−
this._updateBalls = function (dt,balls)
 
−
{
 
−
for (var i = 0; i < balls.length; i ++) {
 
−
var ball = balls[i];
 
−
 
−
ball.zpos += JxHome.zstep;
 
  
−
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)
+
/**************************************************************************************************************************************************************************************************/
−
{
+
/* DEFAULT WIKI SETTINGS */
−
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) {
+
#home_logo, #sideMenu { display:none; }
−
var pkg = this,
+
#sideMenu, #top_title, .patrollink  {display:none;}
−
range = JxHome.range,
+
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
−
vpx = JxHome.vpx,
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
−
vpy = JxHome.vpy;
+
−
+
−
this.Particle = function (stage, canvas, id, w, h, x, y, z, r, g, b) {
+
−
this.canvas = canvas;
+
−
+
−
var vpx = canvas.width/2,
+
−
vpy = canvas.height/2;
+
  
−
var ball =  CVS.createPoint3D(stage.ctx, function ()
+
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
−
{
+
−
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;
+
body{
−
this.ypos = Math.cos(a) * Math.sin(b) * r;
+
  margin: 0;
−
this.zpos = -Math.abs(Math.cos(b) * r);
+
  background-color:#fff8e9;
−
+
  color : #826767;
−
this.width = range(3, 15);
+
  font-family: 'Khmer MN';  
−
this.color = color;
+
}
−
this.draw = function ()
+
#contact h3{
−
{
+
font-family: 'Khmer MN';  
−
this.ctx.beginPath();
+
}
−
this.ctx.arc(0, 0, this.width/2, 0, Math.PI*2, true);
+
@font-face {  
−
this.ctx.closePath();
+
  font-family: 'Khmer MN';
−
                    this.ctx.fillStyle = this.color;
+
src: url('Khmer MN.eot');  
−
this.ctx.fill();
+
src: local('Khmer MN Regular'),
−
}
+
    local('Khmer MN'),      
−
});
+
      url('Khmer MN.woff') format('woff'),    
 +
    url('Khmer MN.ttf') format('truetype'), 
 +
      url('Khmer MN.svg#Khmer MN') format('svg');
 +
}
 +
.background{
 +
position:fixed;
 +
top:-200px;
 +
z-index: -1;
 +
opacity: 0.8;
 +
}
  
−
ball.logoPos =
+
.big hr{
−
{//影响粒子密度
+
color:#826767;
−
x: (x-w/2)*11,
+
width:60%;
−
y: (y-h/2)*11,
+
margin:10px auto;
−
z: Math.round((1100-this.canvas.width)/5),
+
border: 0;
−
width: 10,
+
height: 0;
−
r: r,
+
border-top:1px solid  #826767;
−
g: g,
+
border-bottom: 0.5px solid #826767;
−
b: b
+
}
−
};
+
#contact hr{
−
+
color:#826767;
−
ball.f_xpos = ball.xpos;
+
width:60%;
−
ball.f_ypos = ball.ypos;
+
margin:10px auto;
−
ball.f_zpos = ball.zpos;
+
border: 0;
−
ball.t_xpos = ball.logoPos.x;
+
height: 0;
−
ball.t_ypos = ball.logoPos.y;
+
border-top:1px solid  #826767;
−
ball.t_zpos = ball.logoPos.z;
+
border-bottom: 0.5px solid #826767;
−
+
}
−
ball.startAnimTime = (+new Date);
+
.big{
−
ball.end = true;
+
  position: absolute;
−
ball.type = id;
+
  display: block;
−
+
  box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
−
ball.setVanishPoint(canvas.width/2, canvas.height/2);
+
  transition:0.4s;
−
ball.setCenterPoint(0, 0, z);
+
}
−
+
.big :hover{
−
ball.moveX = 1 - Math.random()*2;
+
/*position: absolute;*/
−
return ball;
+
/* display: block;
−
}
+
  box-shadow: 3px 3px 3px rgba(0,0,0,0.4);*/
−
});
+
  transition:0.4s;
 +
  transform:scale(1.2);  
 +
}
  
−
Laro.register('JxHome.$states', function (La) {
+
.big a{
−
var pkg = this;
+
  position: relative;
−
+
  display: block;
−
this.No = La.BaseState.extend(function () {
+
  text-align: center;
−
+
  vertical-align: baseline;
−
}).methods({
+
  top: 50%;
−
enter: function (msg, fromState)
+
  cursor: pointer;
−
{
+
  text-decoration: none;
−
this._t = 0;
+
  color: #4c4040;
−
JxHome.addNormalBalls();
+
  transition:0.4s;
−
},
+
  margin-top:-10px;
−
leave: function ()
+
  font-size: 20px;
−
{
+
}
−
+
−
},
+
−
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;
+
.small{
−
this._t = 0;
+
  position: absolute;
−
this.explosion = false;
+
  display: block;
−
},
+
  box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
−
leave: function () {
+
  height: 75px;
−
for (var i = 0; i < JxHome.stage.children.length; i ++) {
+
  width: 75px;
−
var ball = JxHome.stage.children[i];
+
}
−
if (ball.type == 'youtext') {
+
.small span{
−
JxHome.stage.children.splice(i, 1);
+
  position: relative;
−
i --;
+
  display: block;
−
}
+
  text-align: center;
−
}
+
  vertical-align: baseline;
−
},
+
  top: 9px;
−
update: function (dt) {
+
  font-size: 42px;
−
this._t += dt;
+
}
−
JxHome.updateBalls(dt, 'youtext');
+
−
+
−
if (this._t > 2 && !this.push) {
+
−
JxHome.pushBalls('designIco');
+
−
this.push = true;
+
−
}
+
−
if (this.push) {
+
−
for (var i = 0; i < JxHome.jxParticles.length; i ++)
+
−
{
+
−
var ball = (JxHome.jxParticles[i]);
+
  
−
JxHome.tween(ball, 1000);
+
#logo{
−
ball.zpos += JxHome.zstep;
+
  background:#ffb6bc;
−
+
  height: 180px;
−
ball.rotateX(JxHome.angleX);
+
  width: 180px;
−
ball.rotateY(JxHome.angleY);
+
  left: 0px;
−
var scale = ball.getScale(),
+
  top: 0px;
−
pos = ball.getScreenXY();
+
  z-index: 99;
−
+
}
−
ball.width = Math.max(10*scale, 2);
+
#logo a{
−
ball.x = pos.x;
+
  position: relative;
−
ball.y = pos.y;
+
  top:30px;
−
}
+
left：0px;
−
}
+
  padding-left: 15px;
−
+
  padding-top: 0px;
−
// 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;
+
#logo a：hover{
−
ball.f_ypos = ball.ypos;
+
  transform:scale(1.2);
−
ball.f_zpos = ball.zpos;
+
  transition:0.4s;
−
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;
+
#igem{
−
ball.f_ypos = ball.ypos;
+
  background:#aadffa;
−
ball.f_zpos = ball.zpos;
+
  height: 90px;
−
ball.t_xpos = range(-vpx, vpx);
+
  width: 270px;
−
ball.t_ypos = range(-vpy, vpy);
+
  left: 180px;
−
ball.t_zpos = range(-vpx, vpx);
+
  top: 0px;
−
+
  font-weight: bold;
−
ball.end = false;
+
  z-index: 98;
−
ball.width = range(8, 15);
+
}
−
ball.startAnimTime = (+ new Date);
+
#igem a{
−
}
+
  letter-spacing: 3px;
−
this.explosion = true;
+
  font-size: 16px;
−
this.explosionT = (+new Date);
+
}
−
}
+
#tj{
−
if (this.explosion && (+new Date) - this.explosionT >= 1000) {
+
  background:#ffe389;
−
this.host.setState(4);
+
  height:90px;
−
}
+
  width: 360px;
−
},
+
  left: 180px;
−
draw: function () {
+
  top: 90px;
−
+
  font-weight: bold;
−
}
+
  z-index: 97;
−
});
+
}
−
+
#tj a{
−
this.AT = La.BaseState.extend(function () {
+
  margin-top: -15px;
−
+
  font-size: 24px;
−
}).methods({
+
  font-weight:bold;
−
enter: function (msg, fromState)
+
  letter-spacing: 2px;
−
{
+
}
−
this.push = false;
+
#a{
−
this._t = 0;
+
  background:#ffe389;
−
this.explosion = false;
+
  left: 375px;
−
},
+
  top: 0px;
 +
  font-weight: bold;
 +
  z-index:96;
 +
  color: #f4c84d;
 +
}  
 +
#l{
 +
  background:#aadffa;
 +
  left: 375px;
 +
  top: 75px;
 +
  font-weight: bold;
 +
  z-index:95;
 +
  color: #7cc9e8;
 +
}
  
−
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);
+
#project{
−
ball.x = pos.x;
+
  background:#aadffa;
−
ball.y = pos.y;
+
  height: 90px;
−
}
+
  width: 270px;
−
}
+
  left: 0px;
−
//this.checkExplosion();
+
  top: 180px;
−
},
+
  font-weight: bold;
−
transition: function()
+
  z-index: 94;
−
{
+
}
−
var range = JxHome.range,
+
#project a{
−
vpx = JxHome.vpx,
+
  font-size: 23px;
−
vpy = JxHome.vpy;
+
  margin-top: -14px;
−
if(this._t > 5 && !this.explosion)
+
  }
−
{
+
#p{
−
for (var i = 0; i < JxHome.atParticles.length; i ++)
+
  background:#ffb6bc;
−
{
+
  left: 150px;
−
var ball = JxHome.atParticles[i];
+
  top: 150px;
−
+
  font-weight: bold;
−
ball.f_xpos = ball.xpos;
+
  z-index:93;  
−
ball.f_ypos = ball.ypos;
+
  color: #f4929e;
−
ball.f_zpos = ball.zpos;
+
}
−
ball.t_xpos = range(-vpx, vpx);
+
#h{
−
ball.t_ypos = range(-vpy, vpy);
+
  background:#aadffa;
−
ball.t_zpos = range(-vpx, vpx);
+
  left: 150px;
−
+
  top: 225px;
−
ball.end = false;
+
  font-weight: bold;
−
ball.width = range(8, 15);
+
  z-index:92;
−
ball.startAnimTime = (+ new Date);
+
  color: #7cc9e8;
−
}
+
}
−
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)
+
#medal{
−
{
+
  background:#ffb6bc;
−
var pkg = this;
+
  height: 180px;
−
+
  width: 225px;
−
this.init = function ()
+
  left: 270px;
−
{
+
  top: 180px;
−
this.getStatesList();
+
  font-weight: bold;
−
this.$ = new La.AppFSM(this, this.statesList);
+
  z-index: 91;
−
this.$.setState(0);
+
}
−
}
+
#medal a{
−
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+
  font-size: 20px;
−
this.getStatesList = function ()
+
  margin-top: -60px;
−
{
+
  margin-bottom: 110px;
−
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)
+
 
−
{
+
#notebook{
−
var pkg = this;
+
  background:#ffe389;
−
+
  height: 90px;
−
this.init = function () {
+
  width: 270px;
−
this.$ = new La.Loop(this.looper, this);
+
  left: 0px;
−
}
+
  top: 270px;
−
+
  font-weight:normal;
−
this.looper = function (dt)
+
  z-index: 92;
−
{
+
−
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() {
+
#aa{
−
window.location.href = "index.html";
+
  background:#ffb6bc;
−
});
+
  left: 225px;
 +
  top: 300px;
 +
  font-weight: bold;
 +
  z-index:89;
 +
  color: #f4929e;
 +
}
 +
 
 +
#human{
 +
  background:#aadffa;
 +
  height: 90px;
 +
  width: 315px;
 +
  left: 0px;
 +
  top: 360px;
 +
  font-weight: bold;
 +
  z-index: 88;
 +
}
 +
#collaborations{
 +
  background:#ffe389;
 +
  height: 90px;
 +
  width: 270px;
 +
  left: 315px;
 +
  top: 360px;
 +
  /*font-weight: bold;*/
 +
  z-index: 87;
 +
}
 +
#aaa{
 +
  background:#ffb6bc;
 +
  left: 450px;
 +
  top: 375px;
 +
  font-weight: bold;
 +
  z-index:86;
 +
  color: #f4929e;
 +
}
 +
 
 +
#modeling{
 +
  background:#ffb6bc;
 +
  height: 180px;
 +
  width: 405px;
 +
  left: 0px;
 +
  top: 450px;
 +
/*  font-weight: bold;*/
 +
  z-index: 85;
 +
}
 +
#modeling a{
 +
  font-size: 23px;
 +
  letter-spacing: 2px;
 +
  margin-top: -65px;
 +
  margin-bottom: 110px;
 +
}
 +
#n{
 +
  background:#ffe389;
 +
  left: 375px;
 +
  top: 450px;
 +
  font-weight: bold;
 +
  z-index:84;
 +
  color: #f4c84d;
 +
}
 +
#t{
 +
  background:#ffb6bc;
 +
  left: 375px;
 +
  top: 525px;
 +
  font-weight: bold;
 +
  z-index:83;
 +
  color: #f4929e;
 +
}
 +
 
 +
.bottom{
 +
  position: absolute;
 +
  display: block;
 +
  top: 500px;
 +
  width: 790px;
 +
  left:550px;
 +
  font-size: 19px;
 +
  font-weight: bold;
 +
}
 +
.bottom span{
 +
line-height:29px;
 +
color : #5b3d3d;
 +
word-spacing: 2px;
 +
}
 +
 
 +
.bottom a{
 +
font-size:32px;
 +
color:#e5838f;
 +
}
 +
 
 +
#contact{
 +
  position: absolute;
 +
  top:660px;
 +
  left:60px;
 +
  border-radius: 15px;
 +
  width: 90%;
 +
  height:auto;
 +
  background:rgba(255,255,255,0.4);
 +
/* border: 2.5px solid rgba(0,0,0,0.7);*/
 +
  z-index: 5;
 +
  text-align: center;
 +
  display: block;
 +
  margin-bottom: 100px;
 +
}
 +
 
 +
#contact h3{
 +
  font-size: 22px;
 +
  margin-top:35px;
 +
  margin-bottom:10px;
 +
  color : #5b3d3d;
 +
}
 +
 
 +
#contact span{
 +
  margin-top: 15px;
 +
  font-size: 19px;
 +
  color : #826767;
 +
}
 +
 
 +
#contact img{
 +
  margin-top: 10px;
 +
  transition: all 0.4s;
 +
  margin-bottom: 30px;
 +
}
 +
 
 +
#contact img:hover{
 +
  transform: scale(1.15);
 +
  transition: all 0.4s;
 +
}
 +
 
 +
.ant {
 +
  position: absolute;
 +
  top:620px;
 +
  left:990px;
 +
  z-index: 9;
 +
  transform: rotate(-90deg);
 +
}
 +
.video{
 +
  position: absolute;
 +
  left:0px;
 +
  top:0px;
 +
}
 +
 
 +
 
 +
</style>
 +
 
 +
 
 +
 
 +
<body>
 +
<div class="background">
 +
    <img src="https://static.igem.org/mediawiki/2018/5/57/T--Tongji-Software--background.png" width="100%" >
 +
</div>
 +
  <div id="logo" class="big">
 +
  <a href="http://118.31.56.237:8099/Alpha%20ant/"><img src="https://static.igem.org/mediawiki/2018/9/9d/T--Tongji-Software--logo4.png" width="80%"></a>
 +
</div>
 +
<div id="igem" class="big">
 +
<a href="">2018 iGEM</a>
 +
</div>
 +
<div id="tj" class="big">
 +
<a href="">Tongji-Software</a>
 +
</div>
 +
<div id="project" class="big">
 +
<a href="https://2018.igem.org/Team:Tongji-Software/Project"><b>PROJECT</b></a>
 +
</div>
 +
<div id="medal" class="big">
 +
<a href="https://2018.igem.org/Team:Tongji-Software/Model">MODEL</a>
 +
<hr/>
 +
<a href="https://2018.igem.org/Team:Tongji-Software/Team">TEAM</a>
 +
</div>
 +
<div id="human" class="big">
 +
<a href="https://2018.igem.org/Team:Tongji-Software/Human_Practices">HUMAN PRACTICES</a>
 +
</div>
 +
<div id="collaborations" class="big">
 +
<a href="https://2018.igem.org/Team:Tongji-Software/Collaborations">COLLABORATIONS</a>
 +
</div>
 +
<div id="notebook" class="big">
 +
<a href="https://2018.igem.org/Team:Tongji-Software/Requirements">REQUIRMENTS</a>
 +
</div>
 +
 
 +
<div id="modeling" class="big">
 +
        <a href="https://2018.igem.org/Team:Tongji-Software/Medal">MEDAL</a>
 +
        <hr/>
 +
<a href="https://2018.igem.org/Team:Tongji-Software/Attributions">ATTRIBUTIONS</a>
 +
</div>
 +
 
 +
 
 +
<div class="video">
 +
<video  muted  src="https://static.igem.org/mediawiki/2018/archive/a/ad/20181016164940%21T--Tongji-Software--background-video2.mp4" type="video/mp4"width="100%" height="auto" autoplay="autoplay"  loop="loop">
 +
</video>
 +
</div>
 +
<div class="bottom">
 +
<span><font style="font-size:37px">Alpha ant</font> is a computational tool for <b>pathway design</b> and <b>reconstruction</b>. With full consideration of metabolic burden and some useful functions, we provide an efficient and powerful pathway design guide.</br><a href="http://118.31.56.237:8099/Alpha%20ant/">Click HERE to use!</a></span>
 +
</div>
 +
<div id="contact">
 +
<h3>CONTACT</h3>
 +
<span>annecao@tongji.edu.cn</span><hr/>
 +
<h3>ADDRESS</h3>
 +
<span>1239# Siping Road</br>Tongji University,Shanghai China</span><hr/>
 +
<h3>GET IN TOUCH</h3>
 +
<a href="https://www.facebook.com/tongjiIGEMer/?ref=bookmarks"><img src="https://static.igem.org/mediawiki/2018/8/8c/T--Tongji-Software--facebook.png" width="5%"></a>
 +
</div>
 +
<img class="ant" src="https://static.igem.org/mediawiki/2018/d/de/T--Tongji-Software--ant2.png" width="8%">
 +
 
 +
</body>

Latest revision as of 02:56, 18 October 2018

Alpha ant is a computational tool for pathway design and reconstruction. With full consideration of metabolic burden and some useful functions, we provide an efficient and powerful pathway design guide.
Click HERE to use!

CONTACT

annecao@tongji.edu.cn

ADDRESS

1239# Siping Road
Tongji University,Shanghai China

GET IN TOUCH