Team:WHU-China/Team/Gallary

From 2011.igem.org

(Difference between revisions)
 
(182 intermediate revisions not shown)
Line 1: Line 1:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html>
<html>
<head>
<head>
-
<title>Weakening neighbors - interactive DHTML</title>
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
-
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
+
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
-
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
+
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
-
<meta http-equiv="imagetoolbar" content="no">
+
<style type="text/css">
<style type="text/css">
 +
hr
 +
{
 +
position:absolute;
 +
height:10px;
 +
width:1000px;
 +
left:0px;
 +
color:#B8A789;
 +
background:#B8A789;
 +
}
 +
#follow
 +
{
 +
display:none;
 +
}
 +
#countdown
 +
{
 +
display:none;
 +
}
 +
#visit
 +
{
 +
display:none;
 +
}
 +
#demo
 +
{
 +
position:relative;
 +
top:10px;
 +
height:230px;
 +
width:1000px;
 +
left:0px;
 +
overflow:hidden;
 +
}
 +
#demo img {
 +
top:10px;
 +
height:230px;
 +
width:300px;
 +
}
 +
#indemo {
 +
float: left;
 +
width: 800%;
 +
}
 +
#demo1 {
 +
float: left;
 +
}
 +
#demo2 {
 +
padding:0px 3px;
 +
float: left;
 +
}
 +
#footer-box
 +
{
 +
position:absolute;
 +
top:2000px;
 +
}
 +
.team_images img
 +
{
-
#screen { position: absolute; background: #000; left: 50%; top: 50%; width: 960px; height: 520px; margin-left: -480px; margin-top: -260px; }
+
height:280px;
-
#a { position: absolute; font-family: arial; font-size: 12px; color: #FFF; cursor: pointer; overflow: hidden; width: 0px; }
+
}
-
#b{ position: absolute; }  
+
#preview_images
 +
{
 +
position:relative;
 +
top:20px;
 +
background:transparent;
 +
height:600px;
 +
left:10px;
 +
width:980px;
 +
}
 +
#screen {
 +
  position: relative;
 +
  left: 0px;
 +
  top: 30px;
 +
  width: 1000px;
 +
  height: 600px;
 +
  background:transparent;
 +
}
 +
#screen img {
 +
  position: absolute;
 +
  cursor: pointer;
 +
  visibility: hidden;
 +
  width: 200px;
 +
  height:20px;
 +
}
 +
#screen .tvover {
 +
  border: solid #876;
 +
  opacity: 1;
 +
  filter: alpha(opacity=100);
 +
}
 +
#screen .tvout {
 +
  border: solid #fff;
 +
  opacity: 0.7;
 +
}
 +
#bankImages {
 +
  display: none;
 +
  top:10px;
 +
}
 +
#contact
 +
{position:absolute;
 +
z-index:0;
 +
left:0px;
 +
margin-top:600px;}
 +
div.introduction
 +
{
 +
font-family: 'Lobster',arial,tahoma,宋体b8b\4f53,sans-serif, cursive;
 +
font-size:18px;
 +
}
 +
#bottom
 +
{
 +
position:absolute;
 +
z-index:0;
 +
margin-top:600px;
 +
}
</style>
</style>
-
<script type="text/javascript">  
+
<script type="text/javascript">
-
// ======================================================================
+
$(document).ready(function()
-
// script by Gerard Ferrandez | February, 2010
+
{
-
// --------------------------------------------------------------------
+
  var a1=50;
-
// http://www.dhteumeuleu.com | http://www.twitter.com/ge1doot
+
  var a2=document.body.clientHeight;
-
// Javascript code licensed under CC-BY-NC - Do not remove this notice
+
  document.getElementById("bottom").style.top=(a2+a1).toString()+'px';
-
// ======================================================================
+
  document.getElementById("contact").style.top=(a2+a1+80).toString()+'px';
-
+
});
-
var res = function () {  
+
 
-
// ---- private vars ----
+
 
-
var scr, a0, a1,
+
 
-
divs  = new Array(),
+
 
-
moves  = new Array(),
+
 
-
idle = false,
+
 
-
nw, nh, wu, hu,
+
 
-
mx = [1,0,-1,0,2,0,-2,0,3,0,-3,0,4,0,-4,0],
+
var Library = {};
-
my = [0,1,0,-1,0,2,0,-2,0,3,0,-3,0,4,0,-4],
+
Library.ease = function () {
-
bw = 10;
+
this.target = 0;
-
+
this.position = 0;
-
////////////////////////////////////////////////////////////////////////////
+
this.move = function (target, speed)
-
// ============== grid class =============
+
{
-
var grid = {  
+
  this.position += (target - this.position) * speed;
-
// ===== calculate grid =====
+
}
-
calc : function () {  
+
}
-
// ---- empty grid ----
+
var tv = {
-
this.grid = new Array(24);  
+
O : [],
-
for (var i = 0; i < 24; i++)  
+
screen : {},
-
this.grid[i] = 0;  
+
grid : {
-
// ---- load grid ----
+
  size      : 5, 
-
var i = 0, o;
+
  borderSize : 2, 
-
while ( o = divs[i++] )  
+
  zoomed    : false
-
this.add(o);
+
},
-
},  
+
angle : {
-
// ===== return cell value =====
+
  x : new Library.ease(),
-
cell : function (x, y) {
+
  y : new Library.ease()
-
return this.grid[x * 4 + y];
+
},
-
},  
+
camera : {
-
// ===== area weight =====
+
  x    : new Library.ease(),
-
weight : function (x, y, w, h) {  
+
  y   : new Library.ease(),
-
var gw = 0;  
+
  zoom : new Library.ease(),
-
for(var i = 0; i < w; i++)  
+
  focalLength : 750
-
for(var j = 0; j < h; j++)  
+
},
-
gw += this.cell(i + x, j + y);  
+
init : function ()
-
return gw;  
+
{
-
},
+
  this.screen.obj = document.getElementById('screen');
-
// ===== add div =====  
+
  var img = document.getElementById('bankImages').getElementsByTagName('img');
-
add : function (o) {
+
  this.screen.obj.onselectstart = function () { return false; }
-
for(var i = 0; i < o.w; i++)  
+
  this.screen.obj.ondrag        = function () { return false; }
-
for(var j = 0; j < o.h; j++)  
+
  var ni = 0;
-
this.grid[(i + o.x) * 4 + (j + o.y)] += o.f ? 20 : 1;  
+
  var n = (tv.grid.size / 2) - .5;
-
}
+
  for (var y = -n; y <= n; y++)
-
}
+
  {
-
+
  for (var x = -n; x <= n; x++)
-
////////////////////////////////////////////////////////////////////////////
+
  {
-
// ============== tween class =============
+
    var o = document.createElement('img');
-
var tween = {
+
    var i = img[(ni++) % img.length];
-
// ===== tween stack =====
+
    o.className = 'tvout';
-
divs : new Array(),
+
    o.src = i.src;
-
// ===== create tween object =====  
+
    tv.screen.obj.appendChild(o);
-
tween : function (o, x, y, w, h) {
+
    o.point3D = {
-
return {  
+
    x : x,
-
div : o,
+
    y : y,
-
x : x,  
+
    z  : new Library.ease()
-
y : y,  
+
    };
-
w : w,
+
    o.point2D = {};
-
h : h
+
    o.ratioImage = 1;
-
};  
+
    tv.O.push(o);
-
},
+
    o.onmouseover = function ()
-
// ===== add new tween =====  
+
    {
-
add : function (o, x, y, w, h) {
+
    if (!tv.grid.zoomed)
-
if (o == true) return false;
+
    {
-
// ---- consolidate with last move ----
+
      if (tv.o)
-
var t = this.divs.length - 1;
+
      {
-
if (t >= 0 && this.divs[t].div == o)  
+
      tv.o.point3D.z.target = 0;
-
this.divs[t] = this.tween(o, x, y, w, h);  
+
      tv.o.className = 'tvout';
-
else {
+
      }
-
// ---- push tween ----
+
      this.className = 'tvover';
-
this.divs.push(
+
      this.point3D.z.target = -.5;
-
this.tween(o, x, y, w, h)
+
      tv.o = this;
-
);  
+
    }
-
}  
+
    }
-
},
+
    o.onclick = function ()
-
// ======== start next tween =========
+
    {
-
next : function () {  
+
    if (!tv.grid.zoomed)
-
if (this.divs.length) {  
+
    {
-
var t = this.divs[0];  
+
      tv.camera.x.target = this.point3D.x;
-
var o = t.div;  
+
      tv.camera.y.target = this.point3D.y;
-
o.dx = t.x - o.xc;  
+
      tv.camera.zoom.target = tv.screen.w * 1.25;
-
o.dy = t.y - o.yc;
+
      tv.grid.zoomed = this;
-
o.dw = t.w - o.wc;  
+
    } else {
-
o.dh = t.h - o.hc;  
+
      if (this == tv.grid.zoomed){
-
o.s = 1;  
+
      tv.camera.x.target = 0;
-
o.p = 0;
+
      tv.camera.y.target = 0;
-
return o;  
+
      tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
-
} else return false;
+
      tv.grid.zoomed = false;
-
}  
+
      }
-
}  
+
    }
-
////////////////////////////////////////////////////////////////////////////
+
    }
-
// =============== Div constructor ===============
+
    o.calc = function ()
-
var Frame = function (i, div) {
+
    {
-
// ---- random position ----
+
    this.point3D.z.move(this.point3D.z.target, .5);
-
do {  
+
    var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;
-
this.x = this.x0 = Math.floor(Math.random() * 6);  
+
    var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;
-
this.y = this.y0 = Math.floor(Math.random() * 4);  
+
    var z = this.point3D.z.position * tv.camera.zoom.position;
-
} while (moves[this.x * 4 + this.y]);  
+
    var xy = tv.angle.cx * y  - tv.angle.sx * z;
-
moves[this.x * 4 + this.y] = true;  
+
    var xz = tv.angle.sx * y  + tv.angle.cx * z;
-
// ---- dimensions ----
+
    var yz = tv.angle.cy * xz - tv.angle.sy * x;
-
var img = div.getElementsByTagName("img")[0];  
+
    var yx = tv.angle.sy * xz + tv.angle.cy * x;
-
var wh = img.alt.split(",");
+
    this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
-
img.alt = "";
+
    this.point2D.x = yx * this.point2D.scale;
-
this.w = 1;  
+
    this.point2D.y = xy * this.point2D.scale;
-
this.h = 1;
+
    this.point2D.w = Math.round(
-
this.xc = this.x + .5;  
+
                        Math.max(
-
this.yc = this.y + .5;
+
                          0,
-
this.wc = 0;  
+
                          this.point2D.scale * tv.camera.zoom.position * .8
-
this.hc = 0;
+
                        )
-
this.w1 = wh[0] * 1;  
+
                      );
-
this.h1 = wh[1] * 1;
+
    if (this.ratioImage > 1)
-
this.i = i;  
+
      this.point2D.h = Math.round(this.point2D.w / this.ratioImage);
-
this.s = 0;
+
    else
-
div.parent = this;
+
    {
-
div.onclick = function () { this.parent.click(); }
+
      this.point2D.h = this.point2D.w;
-
this.css = div.style;
+
      this.point2D.w = Math.round(this.point2D.h * this.ratioImage);
-
// ---- push tween ----
+
    }
-
tween.add(this, this.x, this.y, 1, 1);
+
    }
-
}
+
    o.draw = function ()
-
+
    {
-
// ========== calculate moving cost ===========
+
    if (this.complete)
-
Frame.prototype.costMove = function (m) {
+
    {
-
// ---- what direction ----
+
      if (!this.loaded)
-
var sx = mx[m] > 0 ? 1 : mx[m] < 0 ? -1 : 0,
+
      {
-
    sy = my[m] > 0 ? 1 : my[m] < 0 ? -1 : 0,
+
      if (!this.img)
-
    cm = 0;  
+
      {
-
// ---- horizontal ----
+
        this.img = new Image();
-
if (sx != 0) {
+
        this.img.src = this.src;
-
for (var i = this.x; i != this.x + mx[m]; i += sx)
+
      }
-
cm += grid.weight(i, this.y, this.w, this.h);  
+
      if (this.img.complete)
-
// ---- vertical ----
+
      {
-
} else if (sy != 0) {  
+
        this.style.visibility = 'visible';
-
for (var i = this.y; i != this.y + my[m]; i += sy)
+
        this.ratioImage = this.img.width / this.img.height;
-
cm += grid.weight(this.x, i, this.w, this.h);  
+
        this.loaded = true;
-
}  
+
        this.img = false;
-
// ---- return cost ----
+
      }
-
return cm;
+
      }
-
}  
+
      this.style.left = Math.round(
-
+
                          this.point2D.x * this.point2D.scale +
-
// ============ determine moving direction =============
+
                          tv.screen.w - this.point2D.w * .5
-
Frame.prototype.findMove = function () {  
+
                        ) + 'px';
-
var d = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
+
      this.style.top = Math.round(
-
    mx = 1000,
+
                          this.point2D.y * this.point2D.scale +
-
    cm, m;
+
                          tv.screen.h - this.point2D.h * .5
-
// =========== loop distance ============
+
                        ) + 'px';
-
for (var p = 0; p < 4 && mx >= 20; p++) {  
+
      this.style.width  = this.point2D.w + 'px';
-
// ======== vertical neighbors weights ========
+
      this.style.height = this.point2D.h + 'px';
-
for (var i = 0; i < this.w; i++) {  
+
      this.style.borderWidth = Math.round(
-
// ---- up ----
+
                                Math.max(
-
if (this.y - p > 0)  
+
                                  this.point2D.w,
-
d[3 + p * 4] += grid.cell(this.x + i, this.y - (p + 1));  
+
                                  this.point2D.h
-
else
+
                                ) * tv.grid.borderSize * .01
-
// ---- border ----
+
                              ) + 'px';
-
d[3 + p * 4] = 100;
+
      this.style.zIndex = Math.floor(this.point2D.scale * 100);
-
// ---- bottom ----
+
    }
-
if (this.y + p + this.h < 4)
+
    }
-
d[1 + p * 4] += grid.cell(this.x + i, this.y + this.h + p);
+
  }
-
else
+
  }
-
// ---- border ----
+
  tv.resize();
-
d[1 + p * 4] = 100;  
+
  mouse.y = tv.screen.y + tv.screen.h;
-
}  
+
  mouse.x = tv.screen.x + tv.screen.w;
-
// ======== horizontal neighbors weights ========
+
  tv.run();
-
for (var j = 0; j < this.h; j++) {  
+
},
-
// ---- left ----
+
resize : function ()
-
if (this.x - p > 0)
+
{
-
d[2 + p * 4] += grid.cell(this.x - (p + 1), this.y + j);
+
  var o = tv.screen.obj;
-
else
+
  tv.screen.w = o.offsetWidth / 2;
-
// ---- border ----
+
  tv.screen.h = o.offsetHeight / 2;
-
d[2 + p * 4] = 100;  
+
  tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
-
// ---- right ----
+
  for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent)
-
if (this.x + this.w + p < 6)
+
  {
-
d[0 + p * 4] += grid.cell(this.x + this.w + p, this.y + j);  
+
  tv.screen.x += o.offsetLeft;
-
else
+
  tv.screen.y += o.offsetTop;
-
// ---- border ----
+
  }
-
d[0 + p * 4] = 100;
+
},
-
}
+
run : function ()
-
// =============== find direction to the weakest neighbor ================
+
{
-
mx = 1000;
+
  tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);
-
for (var i = 0; i < 4 * (p + 1); i++) {
+
  tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);
-
if ( d[i] < mx) {
+
  tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);
-
// ---- store min values ----
+
  tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);
-
mx = d[i];
+
  tv.camera.zoom.move(tv.camera.zoom.target, .05);
-
m = i;
+
  tv.angle.cx = Math.cos(tv.angle.x.position);
-
cm = this.costMove(i);  
+
  tv.angle.sx = Math.sin(tv.angle.x.position);
-
// ---- equality case ----
+
  tv.angle.cy = Math.cos(tv.angle.y.position);
-
} else if ( d[i] == mx) {
+
  tv.angle.sy = Math.sin(tv.angle.y.position);
-
// ---- less costly move ----
+
  for (var i = 0, o; o = tv.O[i]; i++)
-
var cmm = this.costMove(i);
+
  {
-
if (cmm < cm) {
+
  o.calc();
-
cm = cmm;  
+
  o.draw();
-
m = i;
+
  }
-
mx = d[i];
+
  setTimeout(tv.run, 32);
-
}  
+
}
-
}  
+
}
-
}
+
var mouse = {
-
}
+
x : 0,
-
// ====== return direction [0 = right, 1 = bottom, 2 = left, 3 = up] ======
+
y : 0
-
return m;
+
}
-
}
+
document.onmousemove = function(e)
-
+
{
-
// ============ HTML rendering =============
+
if (window.event) e = window.event;
-
Frame.prototype.paint = function () {
+
mouse.x = e.clientX;
-
this.css.left  = Math.round(bw + this.xc * wu) + "px";  
+
mouse.y = e.clientY;
-
this.css.top   = Math.round(bw + this.yc * hu) + "px";  
+
return false;
-
this.css.width  = Math.round(Math.max(0, this.wc * wu - bw)) + "px";  
+
}
-
this.css.height = Math.round(Math.max(0, this.hc * hu - bw)) + "px";  
+
-
}
+
-
+
-
// ========== easing function ==============
+
-
Frame.prototype.tween = function () {
+
-
if (this.s != 0) {
+
-
// ---- easing ----
+
-
this.p += this.s;
+
-
this.xc += this.dx * this.p * .01;  
+
-
this.yc += this.dy * this.p * .01;  
+
-
this.wc += this.dw * this.p * .01;  
+
-
this.hc += this.dh * this.p * .01;  
+
-
// ---- HTML rendering ----
+
-
this.paint();  
+
-
// ---- percentage steps [1+2+3+4+5+6+7+8+9+10+9+8+7+6+5+4+3+2+1=100] ----
+
-
if (this.p == 10)  
+
-
// ---- reverse acceleration
+
-
this.s = -1;  
+
-
else if (this.p == 0)
+
-
// ---- moving end
+
-
this.s = false;  
+
-
}
+
-
return this.s;
+
-
}
+
-
+
-
// ============= Main IA function for moving divs ===============
+
-
Frame.prototype.click = function () {
+
-
if (moves.length) {
+
-
var i = 0, o;
+
-
while ( o = moves[i++] ) {
+
-
o.f = false;  
+
-
// ---- zoom out ----
+
-
if (o.w != 1 || o.h != 1) {  
+
-
o.w = 1;
+
-
o.h = 1;  
+
-
tween.add(o, o.x, o.y, o.w, o.h);  
+
-
}  
+
-
}  
+
-
}
+
-
// ---- stop here if same div ----
+
-
if (moves[0] == this)  
+
-
moves = new Array();
+
-
else {  
+
-
// ---- init grid weights ----
+
-
moves = new Array();
+
-
grid.calc();
+
-
// =========== find the best place for the zoomed div ===========
+
-
var mvx = 0,
+
-
    mvy = 0;
+
-
// ---- right border limit ----
+
-
if (this.y + this.h1 > 3)
+
-
this.y -= this.y + this.h1 - 4;
+
-
else {
+
-
// ---- vertical backward move ----
+
-
for (var i = this.y - 1; i > this.y - this.h - 1; i--)  
+
-
if (i >= 0 && grid.weight(this.x, i, this.w1, 1) == 0)
+
-
mvy++;  
+
-
}
+
-
// ---- bottom border limit ----
+
-
if (this.x + this.w1 > 5)
+
-
this.x -= this.x + this.w1 - 6;
+
-
else if (!mvy) {
+
-
// ---- horizontal backward move ----
+
-
for (var i = this.x - 1; i > this.x - this.w - 1; i--)  
+
-
if (i >= 0 && grid.weight(i, this.y, 1, this.h1) == 0)
+
-
mvx++;  
+
-
}
+
-
// ============ move zoomed div =============
+
-
this.x -= mvx;
+
-
this.y -= mvy;
+
-
this.w = this.w1;
+
-
this.h = this.h1;
+
-
this.f = true;
+
-
this.findMove();
+
-
grid.add(this);  
+
-
moves.push(this);
+
-
// ========= cascading child moves ==========
+
-
var k = 0, o;
+
-
// ---- loop through all divs ----
+
-
while ( o = divs[k++] ) {
+
-
// ---- skip frozen div ----
+
-
if (o.f != true) {
+
-
// ---- loop through all cells ----
+
-
for (var i = 0; i < o.w; i++) {
+
-
for (var j = 0; j < o.h; j++) {
+
-
// ---- collision (non empty cell) ----
+
-
if (grid.cell(i + o.x, j + o.y) > 1) {
+
-
// ---- move to a better place ----
+
-
var m = o.findMove();  
+
-
o.x += mx[m];
+
-
o.y += my[m];
+
-
// ---- not inside another one ? ----
+
-
if (grid.weight(o.x, o.y, o.w, o.h) < 20) {
+
-
// ---- freeze div and push move ----
+
-
o.f = true;
+
-
grid.add(o);  
+
-
moves.push(o);
+
-
// ---- reset main loop and exit ----
+
-
k = 0;
+
-
break;
+
-
}
+
-
}
+
-
}
+
-
if (o.f) break;  
+
-
}
+
-
}
+
-
}
+
-
// ========= push moves in reverse order =========
+
-
var i = moves.length, o;
+
-
while ( o = moves[--i] )
+
-
tween.add(o, o.x, o.y, o.w, o.h);  
+
-
}
+
-
// ---- start tweens engine ----
+
-
a0 = tween.next();  
+
-
if (idle) {
+
-
idle = false;
+
-
run();
+
-
}
+
-
}
+
-
+
-
// ============== main loop ================
+
-
var run = function () {
+
-
// ---- first tween ----
+
-
if (a0) {
+
-
a0.tween();
+
-
if (a0.p == 10) {
+
-
// ---- next ----
+
-
a1 = a0;
+
-
tween.divs.splice(0,1);  
+
-
a0 = tween.next();
+
-
}
+
-
}
+
-
// ---- second tween ----
+
-
if (a1) {  
+
-
a1.tween();  
+
-
// ---- end anim ----
+
-
if (a1.s === false)  
+
-
a1 = false;  
+
-
}  
+
-
// ---- loop ----
+
-
if (a0 || a1) setTimeout(run, 32);  
+
-
else idle = true;
+
-
}  
+
-
// ============== init script ==============
+
-
var init = function () {  
+
-
// ---- init container ----
+
-
scr = document.getElementById('screen');
+
-
// ---- load divs ----
+
-
var k = 0, o;
+
-
while ( o = scr.getElementsByTagName("div")[k++] )
+
-
divs.push(
+
-
new Frame(k, o)
+
-
);  
+
-
// ---- ajust dimensions ----
+
-
nw = scr.offsetWidth - bw;  
+
-
nh = scr.offsetHeight - bw;
+
-
wu = nw / 6;
+
-
hu = nh / 4;
+
-
// ---- start animation -----
+
-
a0 = tween.next();  
+
-
run();  
+
-
}  
+
-
return {
+
-
// ==== public bloc ====
+
-
init : init
+
-
}
+
-
}();
+
-
+
</script>
</script>
</head>
</head>
<body>
<body>
 +
<div id="content1">
 +
<div id="demo">
 +
<div id="indemo">
 +
<div id="demo1">
 +
<a ><img src="/wiki/images/e/e6/Whu-1.jpg" border="1" /></a>
 +
<a ><img src="/wiki/images/f/f1/Whu-4-2.jpg" border="1" /></a>
 +
<a ><img src="/wiki/images/c/c4/Whu-8.jpg" border="1" /></a>
 +
<a ><img src="/wiki/images/f/f6/Whu-10.jpg" border="1" /></a>
 +
<a ><img src="/wiki/images/6/69/Whu-13.jpg" border="1" /></a>
 +
<a ><img src="/wiki/images/e/e1/Whu-18.jpg" border="1" /></a>
 +
<a><img src="/wiki/images/4/42/Whu-32.jpg" border="1" /></a>
 +
<a ><img src="/wiki/images/f/fc/Whu-43.jpg" border="1" /></a>
 +
<a ><img src="/wiki/images/a/a8/Whu-61.jpg" border="1" /></a>
 +
<a><img src="/wiki/images/5/57/Whu-47.jpg" border="1" /></a>
 +
</div>
 +
<div id="demo2"></div>
 +
<script>
 +
var speed=20;
 +
var tab=document.getElementById("demo");
 +
var tab1=document.getElementById("demo1");
 +
var tab2=document.getElementById("demo2");
 +
tab2.innerHTML=tab1.innerHTML;
 +
function Marquee(){
 +
if(tab.scrollLeft<=0)
 +
tab.scrollLeft+=tab2.offsetWidth
 +
else{
 +
tab.scrollLeft--;
 +
}
 +
}
 +
var MyMar=setInterval(Marquee,speed);
 +
tab.onmouseover=function() {clearInterval(MyMar)};
 +
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
 +
 +
</script>
 +
</div>
 +
</div>
 +
<hr style="top:4px;"></hr>
 +
<hr style="top:236px;"></hr>
 +
<div id="screen">
<div id="screen">
-
  <div id="a"><img id="b" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" width="503" height="376" alt="3,3"></div>
+
<div class="introduction">
-
  <div id="a"><img id="b" src="https://static.igem.org/mediawiki/2011/f/f1/Whu-4-2.jpg" width="465" height="373" alt="3,3"></div>
+
&nbsp;&nbsp;&nbsp;&nbsp;We have spent a busy summer full of happiness and fun. The following photos record this precious experience.<br>
-
  <div id="a"><img id="b" src="https://static.igem.org/mediawiki/2011/c/c4/Whu-8.jpg" width="465" height="373" alt="3,3"></div>
+
&nbsp;&nbsp;&nbsp;&nbsp;Have a try and click on what you want to see clearly!
-
  <div id="a"><img id="b" src="https://static.igem.org/mediawiki/2011/f/f6/Whu-10.jpg" width="301" height="503" alt="2,4"></div>
+
</div></div>
-
  <div id="a"><img id="b" src="https://static.igem.org/mediawiki/2011/6/69/Whu-13.jpg" width="375" height="500" alt="2,4"></div>
+
<div id="bankImages">
-
  <div id="a"><img id="b" src="https://static.igem.org/mediawiki/2011/e/e1/Whu-18.jpg" width="370" height="501" alt="2,4"></div>
+
<img src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg">
-
  <div id="a"><img id="b" src="https://static.igem.org/mediawiki/2011/5/57/Whu-47.jpg" width="465" height="373" alt="3,3"></div>
+
<img src="https://static.igem.org/mediawiki/2011/f/f1/Whu-4-2.jpg">
-
  <div id="a"><img id="b" src="https://static.igem.org/mediawiki/2011/a/a8/Whu-61.jpg" width="307" height="499" alt="2,4"></div>
+
<img src="https://static.igem.org/mediawiki/2011/c/c4/Whu-8.jpg">
-
  <div id="a"><img id="b" src="https://static.igem.org/mediawiki/2011/f/fc/Whu-43.jpg" width="500" height="376" alt="3,3"></div>
+
<img src="https://static.igem.org/mediawiki/2011/f/f6/Whu-10.jpg">
-
   
+
<img src="https://static.igem.org/mediawiki/2011/6/69/Whu-13.jpg">
 +
<img src="https://static.igem.org/mediawiki/2011/e/e1/Whu-18.jpg">
 +
<img src="https://static.igem.org/mediawiki/2011/4/42/Whu-32.jpg">
 +
<img src="https://static.igem.org/mediawiki/2011/f/fc/Whu-43.jpg">
 +
<img src="https://static.igem.org/mediawiki/2011/a/a8/Whu-61.jpg">
 +
<img src="https://static.igem.org/mediawiki/2011/5/57/Whu-47.jpg">
 +
 
 +
<img src="/wiki/images/7/76/Whu-2-2.jpg" />
 +
<img src="/wiki/images/4/41/Whu-5.jpg" />
 +
<img src="/wiki/images/d/d1/Whu-7.jpg" />
 +
<img src="/wiki/images/0/07/Whu-11.jpg"  />
 +
<img src="/wiki/images/3/32/45.jpg" />
 +
<img src="/wiki/images/d/df/Whu-21.jpg" />
 +
<img src="/wiki/images/5/51/Whu-22.jpg"/>
 +
<img src="/wiki/images/e/e1/Whu-26.jpg" />
 +
 
 +
 
 +
 
 +
<img src="/wiki/images/e/e0/27.jpg">
 +
<img src="/wiki/images/1/12/28.jpg">
 +
<img src="/wiki/images/e/e2/29.jpg">
 +
<img src="/wiki/images/e/e3/30.jpg">
 +
  <img src="/wiki/images/5/5f/53.jpg">
 +
<img src="/wiki/images/b/ba/52.jpg">
 +
<img src="/wiki/images/d/db/54.jpg">
</div>
</div>
-
<script type="text/javascript">  
+
<script type="text/javascript">
-
// ==== start script ====  
+
onresize = tv.resize;
-
setTimeout(function() {
+
tv.init();
-
res.init();
+
-
}, 100);  
+
</script>
</script>
 +
<div id="bottom">
 +
<image src="/wiki/images/5/58/Whu-backgroundbottom.png"/>
 +
</div>
 +
<!-- bottom and needed to be modified in the top-->
 +
 +
<div id="contact">
 +
<a href="https://2011.igem.org/wiki/index.php?title=Team:WHU-China/Team/Gallary&action=edit"><img class="whucontact" style="position:relative;left:636px;top:38px;z-index:10;" src="/wiki/images/2/2a/Whu-Home_r1_c1.png"/></a>
 +
<a href="Mailto:gubrian890512@gmail.com"><img class="whucontact" style="position:relative;left:660px;top:38px;z-index:10;" src="/wiki/images/9/97/Whu-Home_r1_c3.png"/></a>
 +
<a href="https://igem.org/Main_Page"><img class="whucontact" style="position:relative;left:676px;top:38px;z-index:10;" src="/wiki/images/0/03/Whu-Home_r1_c5.png"/></a>
 +
<img id="bb" src="/wiki/images/3/3c/Whu-build.jpg"/>
 +
</div>
 +
 +
 +
 +
 +
 +
<div style="height:100px;"></div>
 +
</div>
 +
 +
 +
 +
</body>
</body>
 +
</html>
</html>
 +
{{WHUcss}}

Latest revision as of 07:45, 23 October 2011

    We have spent a busy summer full of happiness and fun. The following photos record this precious experience.
    Have a try and click on what you want to see clearly!
Count Down

days

hours

minutes

seconds

Visitor

Retrieved from "http://2011.igem.org/Team:WHU-China/Team/Gallary"