Team:WHU-China/Team/Gallary

From 2011.igem.org

(Difference between revisions)
 
(116 intermediate revisions not shown)
Line 5: Line 5:
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
<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
#countdown
{
{
Line 16: Line 29:
{
{
position:relative;
position:relative;
-
top:15px;
+
top:10px;
-
height:260px;
+
height:230px;
width:1000px;
width:1000px;
left:0px;
left:0px;
Line 23: Line 36:
}
}
#demo img {
#demo img {
-
top:20px;
+
top:10px;
-
height:260px;
+
height:230px;
width:300px;
width:300px;
}
}
Line 57: Line 70:
width:980px;
width:980px;
}
}
-
#center {
+
#screen {
-
LEFT: 50%; POSITION: absolute; TOP: 50%
+
  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;
}
}
-
#DHTMLBOOK {
+
#bottom
-
BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px
+
{
 +
position:absolute;
 +
z-index:0;
 +
margin-top:600px;
}
}
-
#TXTBOX {
+
</style>
-
FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center
+
<script type="text/javascript">
-
}
+
$(document).ready(function()
-
.page {
+
{
-
OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%
+
  var a1=50;
-
}
+
  var a2=document.body.clientHeight;
-
.right {
+
  document.getElementById("bottom").style.top=(a2+a1).toString()+'px';
-
BORDER-RIGHT: #000000 1px solid; LEFT: 50%
+
  document.getElementById("contact").style.top=(a2+a1+80).toString()+'px';
-
}
+
});
-
.turn {
+
-
BACKGROUND: #000000
+
-
}
+
-
.img {
+
-
WIDTH: 200%; POSITION: absolute; HEIGHT: 100%
+
-
}
+
-
</STYLE>
+
-
<SCRIPT type=text/javascript><!--
 
-
document.onselectstart = function () { return false; }
 
-
var nI  = 0;
 
-
var kI  = 0;
 
-
var run = false;
 
-
function setOpacity(obj,o) {
 
-
if (o<0) o=0; else if (o>100) o = 100;
 
-
if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;
 
-
}
 
-
function TPR__(p) {
 
-
P1.style.left  = 50-(2.5*p)+"%";
 
-
P1.style.width = (2.5*p)+"%";
 
-
setOpacity(P1i, .5*p*p);
 
-
if (p == 20) run = false;
 
-
}
 
-
function TPR_(p) {
 
-
P2.style.width = 50-(2.5*p)+"%";
 
-
setOpacity(P2i, 100-.5*(p*p));
 
-
if (p == 20) {
 
-
P2i.src = IMGSRC[kI].src;
 
-
setOpacity(P2i, 100);
 
-
P2.style.width = "50%";
 
-
for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);
 
-
}
 
-
}
 
-
function TPR() {
 
-
if (!run) {
 
-
run = true;
 
-
P01i.src = IMGSRC[kI].src;
 
-
P1.style.width = 0;
 
-
kI++;
 
-
if (kI>=nI) kI = 0;
 
-
titLe(kI);
 
-
P02i.src = IMGSRC[kI].src;
 
-
P1i.src  = IMGSRC[kI].src;
 
-
for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);
 
-
} else setTimeout("TPR()", 100);
 
-
}
 
-
function TPL__(p) {
+
 
-
P2.style.width = (2.5*p)+"%";
+
 
-
setOpacity(P2i, .5*p*p);
+
var Library = {};
-
if (p == 20) run = false;
+
Library.ease = function () {
 +
this.target = 0;
 +
this.position = 0;
 +
this.move = function (target, speed)
 +
{
 +
  this.position += (target - this.position) * speed;
 +
}
}
}
-
function TPL_(p) {
+
var tv = {
-
P1.style.left = (2.5*p)+"%";
+
O : [],
-
P1.style.width = 40+(10-2.5*p)+"%";
+
screen : {},
-
setOpacity(P1i, 100-.5*(p*p));
+
grid : {
-
if (p == 20) {
+
  size      : 5, 
-
P1i.src = IMGSRC[kI].src;
+
  borderSize : 2, 
-
setOpacity(P1i, 100);
+
  zoomed    : false
-
P1.style.left  = 0;
+
},
-
P1.style.width = "50%";
+
angle : {
-
for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);
+
  x : new Library.ease(),
-
}
+
  y : new Library.ease()
 +
},
 +
camera : {
 +
  x    : new Library.ease(),
 +
  y    : new Library.ease(),
 +
  zoom : new Library.ease(),
 +
  focalLength : 750
 +
  },
 +
init : function ()
 +
{
 +
  this.screen.obj = document.getElementById('screen');
 +
  var img = document.getElementById('bankImages').getElementsByTagName('img');
 +
  this.screen.obj.onselectstart = function () { return false; }
 +
  this.screen.obj.ondrag        = function () { return false; }
 +
  var ni = 0;
 +
  var n = (tv.grid.size / 2) - .5;
 +
  for (var y = -n; y <= n; y++)
 +
  {
 +
  for (var x = -n; x <= n; x++)
 +
  {
 +
    var o = document.createElement('img');
 +
    var i = img[(ni++) % img.length];
 +
    o.className = 'tvout';
 +
    o.src = i.src;
 +
    tv.screen.obj.appendChild(o);
 +
    o.point3D = {
 +
    x  : x,
 +
    y  : y,
 +
    z  : new Library.ease()
 +
    };
 +
    o.point2D = {};
 +
    o.ratioImage = 1;
 +
    tv.O.push(o);
 +
    o.onmouseover = function ()
 +
    {
 +
    if (!tv.grid.zoomed)
 +
    {
 +
      if (tv.o)
 +
      {
 +
      tv.o.point3D.z.target = 0;
 +
      tv.o.className = 'tvout';
 +
      }
 +
      this.className = 'tvover';
 +
      this.point3D.z.target = -.5;
 +
      tv.o = this;
 +
    }
 +
    }
 +
    o.onclick = function ()
 +
    {
 +
    if (!tv.grid.zoomed)
 +
    {
 +
      tv.camera.x.target = this.point3D.x;
 +
      tv.camera.y.target = this.point3D.y;
 +
      tv.camera.zoom.target = tv.screen.w * 1.25;
 +
      tv.grid.zoomed = this;
 +
    } else {
 +
      if (this == tv.grid.zoomed){
 +
      tv.camera.x.target = 0;
 +
      tv.camera.y.target = 0;
 +
      tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
 +
      tv.grid.zoomed = false;
 +
      }
 +
    }
 +
    }
 +
    o.calc = function ()
 +
    {
 +
    this.point3D.z.move(this.point3D.z.target, .5);
 +
    var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;
 +
    var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;
 +
    var z = this.point3D.z.position * tv.camera.zoom.position;
 +
    var xy = tv.angle.cx * y  - tv.angle.sx * z;
 +
    var xz = tv.angle.sx * y  + tv.angle.cx * z;
 +
    var yz = tv.angle.cy * xz - tv.angle.sy * x;
 +
    var yx = tv.angle.sy * xz + tv.angle.cy * x;
 +
    this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
 +
    this.point2D.x = yx * this.point2D.scale;
 +
    this.point2D.y = xy * this.point2D.scale;
 +
    this.point2D.w = Math.round(
 +
                        Math.max(
 +
                          0,
 +
                          this.point2D.scale * tv.camera.zoom.position * .8
 +
                        )
 +
                      );
 +
    if (this.ratioImage > 1)
 +
      this.point2D.h = Math.round(this.point2D.w / this.ratioImage);
 +
    else
 +
    {
 +
      this.point2D.h = this.point2D.w;
 +
      this.point2D.w = Math.round(this.point2D.h * this.ratioImage);
 +
    }
 +
    }
 +
    o.draw = function ()
 +
    {
 +
    if (this.complete)
 +
    {
 +
      if (!this.loaded)
 +
      {
 +
      if (!this.img)
 +
      {
 +
        this.img = new Image();
 +
        this.img.src = this.src;
 +
      }
 +
      if (this.img.complete)
 +
      {
 +
        this.style.visibility = 'visible';
 +
        this.ratioImage = this.img.width / this.img.height;
 +
        this.loaded = true;
 +
        this.img = false;
 +
      }
 +
      }
 +
      this.style.left = Math.round(
 +
                          this.point2D.x * this.point2D.scale +
 +
                          tv.screen.w - this.point2D.w * .5
 +
                        ) + 'px';
 +
      this.style.top = Math.round(
 +
                          this.point2D.y * this.point2D.scale +
 +
                          tv.screen.h - this.point2D.h * .5
 +
                        ) + 'px';
 +
      this.style.width = this.point2D.w + 'px';
 +
      this.style.height = this.point2D.h + 'px';
 +
      this.style.borderWidth = Math.round(
 +
                                Math.max(
 +
                                  this.point2D.w,
 +
                                  this.point2D.h
 +
                                ) * tv.grid.borderSize * .01
 +
                              ) + 'px';
 +
      this.style.zIndex = Math.floor(this.point2D.scale * 100);
 +
    }
 +
    }
 +
  }
 +
  }
 +
  tv.resize();
 +
  mouse.y = tv.screen.y + tv.screen.h;
 +
  mouse.x = tv.screen.x + tv.screen.w;
 +
  tv.run();
 +
},
 +
resize : function ()
 +
{
 +
  var o = tv.screen.obj;
 +
  tv.screen.w = o.offsetWidth / 2;
 +
  tv.screen.h = o.offsetHeight / 2;
 +
  tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
 +
  for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent)
 +
  {
 +
  tv.screen.x += o.offsetLeft;
 +
  tv.screen.y += o.offsetTop;
 +
  }
 +
},
 +
run : function ()
 +
{
 +
  tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);
 +
  tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);
 +
  tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);
 +
  tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);
 +
  tv.camera.zoom.move(tv.camera.zoom.target, .05);
 +
  tv.angle.cx = Math.cos(tv.angle.x.position);
 +
  tv.angle.sx = Math.sin(tv.angle.x.position);
 +
  tv.angle.cy = Math.cos(tv.angle.y.position);
 +
  tv.angle.sy = Math.sin(tv.angle.y.position);
 +
  for (var i = 0, o; o = tv.O[i]; i++)
 +
  {
 +
  o.calc();
 +
  o.draw();
 +
  }
 +
  setTimeout(tv.run, 32);
 +
}
}
}
-
function TPL() {
+
var mouse = {
-
if (!run) {
+
x : 0,
-
run = true;
+
y : 0
-
P02i.src = IMGSRC[kI].src;
+
-
P2.style.width = 0;
+
-
kI--;
+
-
if (kI < 0) kI = nI-1;
+
-
titLe(kI);
+
-
P01i.src = IMGSRC[kI].src;
+
-
P2i.src  = IMGSRC[kI].src;
+
-
for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);
+
-
} else setTimeout("TPL()", 100);
+
}
}
-
function titLe(p) {
+
document.onmousemove = function(e)
-
document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;
+
{
 +
if (window.event) e = window.event;
 +
mouse.x = e.clientX;
 +
mouse.y = e.clientY;
 +
return false;
}
}
-
onload = function() {
+
</script>
-
IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");
+
-
DB      = document.getElementById("DHTMLBOOK");
+
-
P01    = DB.getElementsByTagName("span")[0];
+
-
P01i    = P01.getElementsByTagName("img")[0];
+
-
P02    = DB.getElementsByTagName("span")[1];
+
-
P02i    = P02.getElementsByTagName("img")[0];
+
-
P1      = DB.getElementsByTagName("span")[2];
+
-
P1i    = P1.getElementsByTagName("img")[0];
+
-
P2      = DB.getElementsByTagName("span")[3];
+
-
P2i    = P2.getElementsByTagName("img")[0];
+
-
nI      = IMGSRC.length;
+
-
P1i.src = IMGSRC[kI].src;
+
-
P2i.src = IMGSRC[kI].src;
+
-
titLe(kI);
+
-
DB.style.visibility = "visible";
+
-
}
+
-
//-->
+
-
</SCRIPT>
+
-
 
+
-
<META content="MSHTML 6.00.6000.16809" name=GENERATOR>
+
-
 
+
</head>
</head>
<body>
<body>
Line 215: Line 366:
</div>
</div>
</div>
</div>
 +
<hr style="top:4px;"></hr>
 +
<hr style="top:236px;"></hr>
-
<div id="#preview_images">
+
<div id="screen">
-
<DIV id=center>
+
<div class="introduction">
-
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>
+
&nbsp;&nbsp;&nbsp;&nbsp;We have spent a busy summer full of happiness and fun. The following photos record this precious experience.<br>
-
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>
+
&nbsp;&nbsp;&nbsp;&nbsp;Have a try and click on what you want to see clearly!
-
<SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>
+
</div></div>
-
<SPAN class="page turn right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="FILTER: alpha(); LEFT: -100%; opacity: 1"></SPAN>  
+
<div id="bankImages">
-
<DIV id=TXTBOX></DIV></DIV></DIV>
+
<img src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg">
-
<DIV id=imgsrc style="VISIBILITY: hidden">
+
<img src="https://static.igem.org/mediawiki/2011/f/f1/Whu-4-2.jpg">
-
<IMG alt="In the early morning he departed." src="/wiki/images/e/e6/Whu-1.jpg">
+
<img src="https://static.igem.org/mediawiki/2011/c/c4/Whu-8.jpg">
-
<IMG alt="Believing she had dreamed of the roar of his bike," src="/wiki/images/f/f1/Whu-4-2.jpg">
+
<img src="https://static.igem.org/mediawiki/2011/f/f6/Whu-10.jpg">
-
<IMG alt="she woke up to the sunshine in her eyelids." src="/wiki/images/c/c4/Whu-8.jpg">
+
<img src="https://static.igem.org/mediawiki/2011/6/69/Whu-13.jpg">
-
<IMG alt="2" src="/wiki/images/f/f6/Whu-10.jpg">
+
<img src="https://static.igem.org/mediawiki/2011/e/e1/Whu-18.jpg">
-
<IMG alt="3" src="/wiki/images/6/69/Whu-13.jpg">
+
<img src="https://static.igem.org/mediawiki/2011/4/42/Whu-32.jpg">
-
</DIV>
+
<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">
 +
onresize = tv.resize;
 +
tv.init();
 +
</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>
 +
 +
 +
 +
 +
 +
<div style="height:100px;"></div>
 +
</div>
 +
 +

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"