Team:XMU-China/TTeam

Revision as of 14:12, 13 October 2014 (view source)

TonyWu (Talk | contribs)

← Older edit

Latest revision as of 16:59, 17 October 2014 (view source)

TonyWu (Talk | contribs)

(24 intermediate revisions not shown)

Line 35:

}

</style>

+

+

+

+

var BW = 800; //canvas width

+

var BH = 600; //canvas height

+

var MAX_STAR_SIZE = 3;

+

var MAX_STAR_SPEED = 1;

+

var STAR_COUNT = 120;

+

var BGCOLOR = "black";

+

var ctx;

+

var stars = [];

+

function rndf(n){

+

return Math.floor(Math.random()*n);

+

}

+

function rndc(n){

+

return Math.ceil(Math.random()*n);

+

}

+

function Star(){

+

this.reset = function(){

+

this.x = 0;

+

this.y = rndf(BH);

+

this.size = rndc(MAX_STAR_SIZE);

+

this.vx = MAX_STAR_SPEED*this.size/MAX_STAR_SIZE;

+

this.vy = 0;

+

this.color = "rgba("+rndf(255)+", "+rndf(255)+", "+rndf(255)+", 0.5)";

+

};

+

this.reset();

+

this.x = rndf(BW);

+

}

+

function render(){

+

ctx.globalCompositeOperation = "source-over";

+

ctx.fillStyle = "rgba(0, 0, 0, 0.3)";

+

ctx.fillRect(0, 0, BW, BH);

+

ctx.globalCompositeOperation = "lighter";

+

for(var i = 0; i < STAR_COUNT; ++i){

+

var p = stars[i];

+

ctx.beginPath();

+

var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size);

+

gradient.addColorStop(0, "white");

+

gradient.addColorStop(0.4, "white");

+

gradient.addColorStop(0.4, p.color);

+

gradient.addColorStop(1, "black");

+

ctx.fillStyle = gradient;

+

ctx.arc(p.x, p.y, p.size, Math.PI*2, false);

+

ctx.fill();

+

p.x += p.vx;

+

p.y += p.vy;

+

if(p.x<=0 || p.x>=BW || p.y<=0 || p.y>=BH){

+

p.reset();

+

}

+

}

+

}

+

function init(){

+

if (!window.console){

+

console = {log:function(){},debug:function(){}};

+

}

+

//create canvas

+

var cv = document.createElement('canvas');

+

cv.width = BW;

+

cv.height = BH;

+

cv.style.background = BGCOLOR;

+

document.body.appendChild(cv);

+

ctx = cv.getContext("2d");

+

//create all stars

+

for(var i=0;i<STAR_COUNT;++i){

+

var s = new Star();

+

stars.push(s);

+

}

+

setInterval(render, 33);

+

};

+

</script>

+

</head>

-

~~<body>~~

-

+

</div>

-

+

</div>

Line 53:

Line 123:

</div>

-

+

-

+

<img src="https://static.igem.org/mediawiki/2014/e/e3/XMU-Home-galaxy.gif" onmouseover="movein()"

+

style="position: absolute;

+

clip: rect(10px,800px,600px,0px);

+

opacity: 0.8;

+

border-radius: 2000px;"

+

/>

</div>

+

-

+

-

+

-

+

-

+

-

+

-

+

-

+

-

+

-

+

-

+

-

+

-

+

</div>

Line 225:

Line 301:

</script>

+

</body>

+

+

</body>

+

<style>

+

#footer {

+

position: fixed;

+

bottom: 0;

+

width: 100%;

+

height: 50px;

+

margin-top: -60px;

+

background: transparent url("https://static.igem.org/mediawiki/2014/6/68/XMU-all-footer.png") no-repeat center top;

+

line-height: 100;

+

overflow: hidden;

+

z-index: 1000;

+

_display: none;

+

}

+

</style>

+

<body>

+

+

+

</div>

</body>

</html>

@@ Line 35: / Line 35: @@
 }
 </style>
+<META http-equiv="X-UA-Compatible" content="IE=edge"></META>
+<META http-equiv="Content-Type" content="text/html; charset=gb2312"/>
+<script>
+var BW = 800; //canvas width
+var BH = 600; //canvas height
+var MAX_STAR_SIZE = 3;
+		var MAX_STAR_SPEED = 1;
+		var STAR_COUNT = 120;
+		var BGCOLOR = "black";
+		var ctx;
+		var stars = [];
+		function rndf(n){
+			return Math.floor(Math.random()*n);
+		}
+		function rndc(n){
+			return Math.ceil(Math.random()*n);
+		}
+		function Star(){
+			this.reset = function(){
+				this.x = 0;
+				this.y = rndf(BH);
+				this.size = rndc(MAX_STAR_SIZE);
+				this.vx = MAX_STAR_SPEED*this.size/MAX_STAR_SIZE;
+				this.vy = 0;
+				this.color = "rgba("+rndf(255)+", "+rndf(255)+", "+rndf(255)+", 0.5)";
+			};
+			this.reset();
+			this.x = rndf(BW);
+		}
+		function render(){
+			ctx.globalCompositeOperation = "source-over";
+			ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
+			ctx.fillRect(0, 0, BW, BH);
+			ctx.globalCompositeOperation = "lighter";
+			for(var i = 0; i < STAR_COUNT; ++i){
+				var p = stars[i];
+				ctx.beginPath();
+				var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size);
+				gradient.addColorStop(0, "white");
+				gradient.addColorStop(0.4, "white");
+				gradient.addColorStop(0.4, p.color);
+				gradient.addColorStop(1, "black");
+				ctx.fillStyle = gradient;
+				ctx.arc(p.x, p.y, p.size, Math.PI*2, false);
+				ctx.fill();
+				p.x += p.vx;
+				p.y += p.vy;
+				if(p.x<=0 || p.x>=BW || p.y<=0 || p.y>=BH){
+					p.reset();
+				}
+			}
+		}
+		function init(){
+			if (!window.console){
+				console = {log:function(){},debug:function(){}};
+			}
+			//create canvas
+			var cv = document.createElement('canvas');
+			cv.width = BW;
+			cv.height = BH;
+			cv.style.background = BGCOLOR;
+			document.body.appendChild(cv);
+			ctx = cv.getContext("2d");
+			//create all stars
+			for(var i=0;i<STAR_COUNT;++i){
+				var s = new Star();
+				stars.push(s);
+			}
+			setInterval(render, 33);
+		};
+		</script>
+	</head>
 </head>
-<body>
 	<div id="background" style="position:fixed;z-index:-1;width:100%;height:100%;top:0px;left:0px;">
-		<img src="https://static.igem.org/mediawiki/2014/0/0a/XMU-Home-Background2.png" width="80%" height="100%"/>
+		<img src="https://static.igem.org/mediawiki/2014/0/0a/XMU-Home-Background2.png" width="100%" height="100%"/>
 	</div>
 	<div style="width:1000px;margin:0px auto">
 	<div id="topic">
-		<img src="https://static.igem.org/mediawiki/2014/c/c3/XMU-home-topic.png" width="1000px" height="200px"/>
+		<img src="https://static.igem.org/mediawiki/2014/3/32/XMU-home-topic2.png" width="900px" height="200px"/>
 	</div>
 	</div>
@@ Line 53: / Line 123: @@
 		<img src="https://static.igem.org/mediawiki/2014/7/73/XMU-home-footer.png" width="80%" />
 	</div>
-	<div id="pic" style="position:absolute;">
+	<div id="pic" style="position:absolute;left: 420px; top: 210px;">
-		<img src="https://static.igem.org/mediawiki/2014/e/e3/XMU-Home-galaxy.gif" onmouseover="movein()"/>
+		<img src="https://static.igem.org/mediawiki/2014/e/e3/XMU-Home-galaxy.gif" onmouseover="movein()"
+    style="position: absolute;
+    clip: rect(10px,800px,600px,0px);
+    opacity: 0.8;
+    border-radius: 2000px;"
+/>
 	</div>
+<canvas></canvas>
 	<div style="width:1000px;margin:0px auto">
 	<div id="icon" style="position:relative;top:-150px">
-			<a href="https://2014.igem.org/Team:XMU-China/p&p"><img src="https://static.igem.org/mediawiki/2014/6/6e/XMU-icon_1.png" id="icon1" class="icon" style="position:absolute; left: 150px; top: 390px;" width="100px;" height="100px;" onmouseover="moveout_1(this)" /></a>
+			<a href="https://2014.igem.org/Team:XMU-China/p&p"><img src="https://static.igem.org/mediawiki/2014/5/5d/XMU-Home-icon-pp.png" id="icon1" class="icon" style="position:absolute; left: 50px; top: 300px;" width="200px;" height="200px;" onmouseover="moveout_1(this)" /></a>
-			<a href="https://2014.igem.org/Team:XMU-China/judging"><img src="https://static.igem.org/mediawiki/2014/3/36/XMU-icon_2.png" id="icon2" class="icon" style="position:absolute; left: 70px; top: 345px;" width="100px;" height="100px;" onmouseover="moveout_2(this)" /></a>
+			<a href="https://2014.igem.org/Team:XMU-China/judging"><img src="https://static.igem.org/mediawiki/2014/4/4c/XMU-Home-icon-j.png" id="icon2" class="icon" style="position:absolute; left: -90px; top: 225px;" width="200px;" height="200px;" onmouseover="moveout_2(this)" /></a>
-			<a href="https://2014.igem.org/Team:XMU-China/safety"><img src="https://static.igem.org/mediawiki/2014/b/be/XMU-icon_3.png" id="icon3" class="icon" style="position:absolute; left: 150px; top: 300px;" width="100px;" height="100px;" onmouseover="moveout_3(this)" /></a>
+			<a href="https://2014.igem.org/Team:XMU-China/safety"><img src="https://static.igem.org/mediawiki/2014/9/9c/XMU-Home-icon-safety.png" id="icon3" class="icon" style="position:absolute; left: 50px; top: 150px;" width="200px;" height="200px;" onmouseover="moveout_3(this)" /></a>
-			<a href="https://2014.igem.org/Team:XMU-China/notebook"><img src="https://static.igem.org/mediawiki/2014/c/c2/XMU-icon_4.png" id="icon4" class="icon" style="position:absolute; left: 820px; top: 225px;" width="100px;" height="100px;"  onmouseover="moveout_4(this)" /></a>
+			<a href="https://2014.igem.org/Team:XMU-China/notebook"><img src="https://static.igem.org/mediawiki/2014/c/c2/XMU-icon_4.png" id="icon4" class="icon" style="position:absolute; left: 880px; top: 225px;" width="200px;" height="200px;"  onmouseover="moveout_4(this)" /></a>
-			<a href="https://2014.igem.org/Team:XMU-China/team"><img src="https://static.igem.org/mediawiki/2014/4/48/XMU-icon_5.png" id="icon5" class="icon" style="position:absolute; left: 740px; top: 270px;" width="100px;" height="100px;" onmouseover="moveout_5(this)" /></a>
+			<a href="https://2014.igem.org/Team:XMU-China/team"><img src="https://static.igem.org/mediawiki/2014/4/48/XMU-icon_5.png" id="icon5" class="icon" style="position:absolute; left: 740px; top: 300px;" width="200px;" height="200px;" onmouseover="moveout_5(this)" /></a>
-			<a href="https://2014.igem.org/Team:XMU-China/Project"><img src="https://static.igem.org/mediawiki/2014/0/00/XMU-icon_6.png" id="icon6" class="icon" style="position:absolute; left: 740px; top: 180px;" width="100px;" height="100px;" onmouseover="moveout_6(this)" /></a>
+			<a href="https://2014.igem.org/Team:XMU-China/Project"><img src="https://static.igem.org/mediawiki/2014/0/00/XMU-icon_6.png" id="icon6" class="icon" style="position:absolute; left: 740px; top: 150px;" width="200px;" height="200px;" onmouseover="moveout_6(this)" /></a>
-			<a href="https://2014.igem.org/Team:XMU-China/p&p"><img src="https://static.igem.org/mediawiki/2014/9/9e/XMU-Turn_1.png" id="turn1" class="turn" style="position:absolute; left: 150px; top: 390px; z-index:1" width="100px;" height="100px;" /></a>
+			<a href="https://2014.igem.org/Team:XMU-China/p&p"><img src="https://static.igem.org/mediawiki/2014/3/3f/XMU-Home-turn-pp.png" id="turn1" class="turn" style="position:absolute; left: 50px; top: 300px; z-index:1" width="200px;" height="200px;" /></a>
-			<a href="https://2014.igem.org/Team:XMU-China/judging"><img src="https://static.igem.org/mediawiki/2014/b/ba/XMU-Turn_2.png" id="turn2" class="turn" style="position:absolute; left: 70px; top: 345px; z-index:1" width="100px;" height="100px;" /></a>
+			<a href="https://2014.igem.org/Team:XMU-China/judging"><img src="https://static.igem.org/mediawiki/2014/3/38/XMU-Home-turn-j.png" id="turn2" class="turn" style="position:absolute; left: -90px; top: 225px; z-index:1" width="200px;" height="200px;" /></a>
-			<a href="https://2014.igem.org/Team:XMU-China/safety"><img src="https://static.igem.org/mediawiki/2014/5/55/XMU-Turn_3.png" id="turn3" class="turn" style="position:absolute; left: 150px; top: 300px; z-index:1" width="100px;" height="100px;"  /></a>
+			<a href="https://2014.igem.org/Team:XMU-China/safety"><img src="https://static.igem.org/mediawiki/2014/9/90/XMU-Home-turn-safety.png" id="turn3" class="turn" style="position:absolute; left: 50px; top: 150px; z-index:1" width="200px;" height="200px;"  /></a>
-			<a href="https://2014.igem.org/Team:XMU-China/notebook"><img src="https://static.igem.org/mediawiki/2014/5/54/XMU-Turn_4.png" id="turn4" class="turn" style="position:absolute; left: 820px; top: 225px; z-index:1" width="100px;" height="100px;"  /></a>
+			<a href="https://2014.igem.org/Team:XMU-China/notebook"><img src="https://static.igem.org/mediawiki/2014/5/54/XMU-Turn_4.png" id="turn4" class="turn" style="position:absolute; left: 880px; top: 225px; z-index:1" width="200px;" height="200px;"  /></a>
-			<a href="https://2014.igem.org/Team:XMU-China/team"><img src="https://static.igem.org/mediawiki/2014/4/4d/XMU-Turn_5.png" id="turn5" class="turn" style="position:absolute; left: 740px; top: 270px; z-index:1" width="100px;" height="100px;" /></a>
+			<a href="https://2014.igem.org/Team:XMU-China/team"><img src="https://static.igem.org/mediawiki/2014/4/4d/XMU-Turn_5.png" id="turn5" class="turn" style="position:absolute; left: 740px; top: 300px; z-index:1" width="200px;" height="200px;" /></a>
-			<a href="https://2014.igem.org/Team:XMU-China/Project"><img src="https://static.igem.org/mediawiki/2014/b/b7/XMU-Turn_6.png" id="turn6" class="turn" style="position:absolute; left: 740px; top: 180px; z-index:1" width="100px;" height="100px;"   /></a>
+			<a href="https://2014.igem.org/Team:XMU-China/Project"><img src="https://static.igem.org/mediawiki/2014/b/b7/XMU-Turn_6.png" id="turn6" class="turn" style="position:absolute; left: 740px; top: 150px; z-index:1" width="200px;" height="200px;"   /></a>
 	</div>
 	</div>
@@ Line 225: / Line 301: @@
 	 </script>
+</body>
+<body onload="init()">
+</body>
+<style>
+#footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 50px;
+    margin-top: -60px;
+    background: transparent url("https://static.igem.org/mediawiki/2014/6/68/XMU-all-footer.png") no-repeat center top;
+    line-height: 100;
+    overflow: hidden;
+    z-index: 1000;
+    _display: none;
+}
+</style>
+<body>
+ 	<div style="height:100px; bottom:45px; right:50%;margin-right:-200px;position:absolute;z-index:2;"><a href="http://www.xmu.edu.cn">
+      <img src="https://static.igem.org/mediawiki/2014/c/c9/XMU-Sponsor.png" width="100%" height="100%"></a>
+	</div>
 </body>
 </html>

From 2014.igem.org

Latest revision as of 16:59, 17 October 2014