Team:WHU-China/Team/Gallary

From 2011.igem.org

(Difference between revisions)
 
(148 intermediate revisions not shown)
Line 1: Line 1:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
<html>
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
-
 
+
<head>
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
-
<title>超酷超绚精美图片展示效果代码(三) - 网页特效观止-网页特效代码|JsCode.CN|</title>
+
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.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
 +
{
 +
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
 +
{
 +
height:280px;
 +
}
 +
#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>
 +
<script type="text/javascript">
 +
$(document).ready(function()
 +
{
 +
  var a1=50;
 +
  var a2=document.body.clientHeight;
 +
  document.getElementById("bottom").style.top=(a2+a1).toString()+'px';
 +
  document.getElementById("contact").style.top=(a2+a1+80).toString()+'px';
 +
});
-
#diapoContainer {
 
-
position: absolute;
 
-
left: 10%;
 
-
top: 10%;
 
-
width: 80%;
 
-
height: 80%;
 
-
background: #222;
 
-
overflow: hidden;
 
-
}
 
-
.imgDC {
 
-
position: absolute;
 
-
cursor: pointer;
 
-
border: #000 solid 2px;
 
-
filter: alpha(opacity=90);
 
-
opacity: 0.9;
 
-
visibility: hidden;
 
-
}
 
-
.spaDC {
 
-
position: absolute;
 
-
filter: alpha(opacity=20);
 
-
opacity: 0.2;
 
-
background: #000;
 
-
visibility: hidden;
 
-
}
 
-
.imgsrc {
 
-
position: absolute;
 
-
width: 120px;
 
-
height: 67px;
 
-
visibility: hidden;
 
-
margin: 4%;
 
-
}
 
-
#bkgcaption {
 
-
position: absolute;
 
-
bottom: 0px;
 
-
left: 0px;
 
-
width: 100%;
 
-
height: 6%;
 
-
background:#1a1a1a;
 
-
}
 
-
#caption {
 
-
position: absolute;
 
-
font-family: arial, helvetica, verdana, sans-serif;
 
-
white-space: nowrap;
 
-
color: #fff;
 
-
bottom: 0px;
 
-
width: 100%;
 
-
left: -10000px;
 
-
text-align: center;
 
-
}
 
-
</style>
 
-
<script type="text/javascript">
 
-
var xm;
 
-
var ym;
 
-
/* ==== onmousemove event ==== */
+
var Library = {};
-
document.onmousemove = function(e){
+
Library.ease = function () {
-
if(window.event) e=window.event;
+
this.target = 0;
-
xm = (e.x || e.clientX);
+
this.position = 0;
-
ym = (e.y || e.clientY);
+
this.move = function (target, speed)
 +
{
 +
  this.position += (target - this.position) * speed;
 +
}
}
}
-
 
+
var tv = {
-
/* ==== window resize ==== */
+
O : [],
-
function resize() {
+
screen : {},
-
if(diapo)diapo.resize();
+
grid : {
 +
  size      : 5, 
 +
  borderSize : 2, 
 +
  zoomed    : false
 +
},
 +
angle : {
 +
  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);
 +
}
}
}
-
onresize = resize;
+
var mouse = {
-
 
+
x : 0,
-
/* ==== opacity ==== */
+
y : 0
-
setOpacity = function(o, alpha){
+
-
if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
+
}
}
 +
document.onmousemove = function(e)
 +
{
 +
if (window.event) e = window.event;
 +
mouse.x = e.clientX;
 +
mouse.y = e.clientY;
 +
return false;
 +
}
 +
</script>
 +
</head>
 +
<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">
-
/* ===== encapsulate script ==== */
+
<div class="introduction">
-
diapo = {
+
&nbsp;&nbsp;&nbsp;&nbsp;We have spent a busy summer full of happiness and fun. The following photos record this precious experience.<br>
-
O : [],
+
&nbsp;&nbsp;&nbsp;&nbsp;Have a try and click on what you want to see clearly!
-
DC : 0,
+
</div></div>
-
img : 0,
+
<div id="bankImages">
-
txt : 0,
+
<img src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg">
-
N : 0,
+
<img src="https://static.igem.org/mediawiki/2011/f/f1/Whu-4-2.jpg">
-
xm : 0,
+
<img src="https://static.igem.org/mediawiki/2011/c/c4/Whu-8.jpg">
-
ym : 0,
+
<img src="https://static.igem.org/mediawiki/2011/f/f6/Whu-10.jpg">
-
nx : 0,
+
<img src="https://static.igem.org/mediawiki/2011/6/69/Whu-13.jpg">
-
ny : 0,
+
<img src="https://static.igem.org/mediawiki/2011/e/e1/Whu-18.jpg">
-
nw : 0,
+
<img src="https://static.igem.org/mediawiki/2011/4/42/Whu-32.jpg">
-
nh : 0,
+
<img src="https://static.igem.org/mediawiki/2011/f/fc/Whu-43.jpg">
-
rs : 0,
+
<img src="https://static.igem.org/mediawiki/2011/a/a8/Whu-61.jpg">
-
rsB : 0,
+
<img src="https://static.igem.org/mediawiki/2011/5/57/Whu-47.jpg">
-
zo : 0,
+
-
tx_pos : 0,
+
-
tx_var : 0,
+
-
tx_target : 0,
+
-
/////// script parameters ////////
+
<img src="/wiki/images/7/76/Whu-2-2.jpg" />
-
attraction : 2,
+
<img src="/wiki/images/4/41/Whu-5.jpg" />
-
acceleration : .9,
+
<img src="/wiki/images/d/d1/Whu-7.jpg"  />
-
dampening : .1,
+
<img src="/wiki/images/0/07/Whu-11.jpg"  />
-
zoomOver : 2,
+
<img src="/wiki/images/3/32/45.jpg"  />
-
zoomClick : 6,
+
<img src="/wiki/images/d/df/Whu-21.jpg" />
-
transparency : .8,
+
<img src="/wiki/images/5/51/Whu-22.jpg"/>
-
font_size: 18,
+
<img src="/wiki/images/e/e1/Whu-26.jpg"  />
-
//////////////////////////////////
+
-
/* ==== diapo resize ==== */
 
-
resize : function(){
 
-
with(this){
 
-
nx = DC.offsetLeft;
 
-
ny = DC.offsetTop;
 
-
nw = DC.offsetWidth;
 
-
nh = DC.offsetHeight;
 
-
txt.style.fontSize = Math.round(nh / font_size) + "px";
 
-
if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();
 
-
rsB = rs;
 
-
}
 
-
},
 
-
/* ==== create diapo ==== */
 
-
CDiapo : function(o){
 
-
/* ==== init variables ==== */
 
-
this.o        = o;
 
-
this.x_pos    = this.y_pos    = 0;
 
-
this.x_origin = this.y_origin = 0;
 
-
this.x_var    = this.y_var    = 0;
 
-
this.x_target = this.y_target = 0;
 
-
this.w_pos    = this.h_pos    = 0;
 
-
this.w_origin = this.h_origin = 0;
 
-
this.w_var    = this.h_var    = 0;
 
-
this.w_target = this.h_target = 0;
 
-
this.over    = false;
 
-
this.click    = false;
 
-
/* ==== create shadow ==== */
+
<img src="/wiki/images/e/e0/27.jpg">
-
this.spa = document.createElement("span");
+
<img src="/wiki/images/1/12/28.jpg">
-
this.spa.className = "spaDC";
+
<img src="/wiki/images/e/e2/29.jpg">
-
diapo.DC.appendChild(this.spa);
+
<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>
 +
<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-->
-
/* ==== create thumbnail image ==== */
+
<div id="contact">
-
this.img = document.createElement("img");
+
<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>
-
this.img.className = "imgDC";
+
<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>
-
this.img.src = o.src;
+
<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>
-
this.img.O = this;
+
<img id="bb" src="/wiki/images/3/3c/Whu-build.jpg"/>
-
diapo.DC.appendChild(this.img);
+
</div>
-
setOpacity(this.img, diapo.transparency);
+
-
/* ==== mouse events ==== */
 
-
this.img.onselectstart = new Function("return false;");
 
-
this.img.ondrag = new Function("return false;");
 
-
this.img.onmouseover = function(){
 
-
diapo.tx_target=0;
 
-
diapo.txt.innerHTML=this.O.o.alt;
 
-
this.O.over=true;
 
-
setOpacity(this,this.O.click?diapo.transparency:1);
 
-
}
 
-
this.img.onmouseout = function(){
 
-
diapo.tx_target=-diapo.nw;
 
-
this.O.over=false;
 
-
setOpacity(this,diapo.transparency);
 
-
}
 
-
this.img.onclick = function() {
 
-
if(!this.O.click){
 
-
if(diapo.zo && diapo.zo != this) diapo.zo.onclick();
 
-
this.O.click = true;
 
-
this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;
 
-
this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;
 
-
diapo.zo = this;
 
-
setOpacity(this,diapo.transparency);
 
-
} else {
 
-
this.O.click = false;
 
-
this.O.over = false;
 
-
this.O.resize();
 
-
diapo.zo = 0;
 
-
}
 
-
}
 
-
/* ==== rearrange thumbnails based on "imgsrc" images position ==== */
 
-
this.resize = function (){
 
-
with (this) {
 
-
x_origin = o.offsetLeft;
 
-
y_origin = o.offsetTop;
 
-
w_origin = o.offsetWidth;
 
-
h_origin = o.offsetHeight;
 
-
}
 
-
}
 
-
/* ==== animation function ==== */
 
-
this.position = function (){
 
-
with (this) {
 
-
/* ==== set target position ==== */
 
-
w_target = w_origin;
 
-
h_target = h_origin;
 
-
if(over){
 
-
/* ==== mouse over ==== */
 
-
w_target = w_origin * diapo.zoomOver;
 
-
h_target = h_origin * diapo.zoomOver;
 
-
x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));
 
-
y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));
 
-
} else {
 
-
/* ==== mouse out ==== */
 
-
x_target = x_origin;
 
-
y_target = y_origin;
 
-
}
 
-
if(click){
 
-
/* ==== clicked ==== */
 
-
w_target = w_origin * diapo.zoomClick;
 
-
h_target = h_origin * diapo.zoomClick;
 
-
}
 
-
/* ==== magic spring equations ==== */
 
-
x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;
 
-
y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;
 
-
w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);
 
-
h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);
 
-
diapo.rs += (Math.abs(x_var) + Math.abs(y_var));
 
-
/* ==== html animation ==== */
+
<div style="height:100px;"></div>
-
with(img.style){
+
</div>
-
left  = Math.round(x_pos) + "px";
+
-
top    = Math.round(y_pos) + "px";
+
-
width  = Math.round(Math.max(0, w_pos)) + "px";
+
-
height = Math.round(Math.max(0, h_pos)) + "px";
+
-
zIndex = Math.round(w_pos);
+
-
}
+
-
with(spa.style){
+
-
left  = Math.round(x_pos + w_pos * .1) + "px";
+
-
top    = Math.round(y_pos + h_pos * .1) + "px";
+
-
width  = Math.round(Math.max(0, w_pos * 1.1)) + "px";
+
-
height = Math.round(Math.max(0, h_pos * 1.1)) + "px";
+
-
zIndex = Math.round(w_pos);
+
-
}
+
-
}
+
-
}
+
-
},
+
-
/* ==== main loop ==== */
 
-
run : function(){
 
-
diapo.xm = xm - diapo.nx;
 
-
diapo.ym = ym - diapo.ny;
 
-
/* ==== caption anim ==== */
 
-
diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
 
-
diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
 
-
/* ==== images anim ==== */
 
-
for(var i in diapo.O) diapo.O[i].position();
 
-
/* ==== loop ==== */
 
-
setTimeout("diapo.run();", 16);
 
-
},
 
-
/* ==== load images ==== */
 
-
images_load : function(){
 
-
// ===== loop until all images are loaded =====
 
-
var M = 0;
 
-
for(var i=0; i<diapo.N; i++) {
 
-
if(diapo.img[i].complete) {
 
-
diapo.img[i].style.position = "relative";
 
-
diapo.O[i].img.style.visibility = "visible";
 
-
diapo.O[i].spa.style.visibility = "visible";
 
-
M++;
 
-
}
 
-
resize();
 
-
}
 
-
if(M<diapo.N) setTimeout("diapo.images_load();", 128);
 
-
},
 
-
/* ==== init script ==== */
 
-
init : function() {
 
-
diapo.DC = document.getElementById("diapoContainer");
 
-
diapo.img = diapo.DC.getElementsByTagName("img");
 
-
diapo.txt = document.getElementById("caption");
 
-
diapo.N = diapo.img.length;
 
-
for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));
 
-
diapo.resize();
 
-
diapo.tx_pos = -diapo.nw;
 
-
diapo.tx_target = -diapo.nw;
 
-
diapo.images_load();
 
-
diapo.run();
 
-
}
 
-
}
 
-
 
-
</script>
 
-
</head>
 
-
 
-
<body>
 
-
 
-
<div id="diapoContainer">
 
-
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Reconsider your Existence">
 
-
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Something Needs to be Discovered">
 
-
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="They Said Very Little">
 
-
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Only in Your Mind">
 
-
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="The Power of Imagination">
 
-
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Objectivity is Impossible">
 
-
<img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Cleaning Up Operation">
 
-
    <img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Arbitrary Contents">
 
-
    <img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Arbitrary Contents">
 
-
    <img class="imgsrc" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" alt="Arbitrary Contents">
 
-
    <div id="bkgcaption">
 
-
</div>
 
-
<div id="caption">
 
-
</div>
 
-
</div>
 
-
<script type="text/javascript">
 
-
/* ==== start script ==== */
 
-
function dom_onload() {
 
-
if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
 
-
}
 
-
dom_onload();
 
-
</script>
 
</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"