Team:WHU-China/Team/Gallary

From 2011.igem.org

(Difference between revisions)
 
(145 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>
-
<meta http-equiv="imagetoolbar" content="no">
+
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
<style type="text/css">
<style type="text/css">
-
html {
+
hr
-
overflow: hidden;
+
{
-
}
+
position:absolute;
-
body {
+
height:10px;
-
margin: 0px;
+
width:1000px;
-
padding: 0px;
+
left:0px;
-
background: #000;
+
color:#B8A789;
-
width: 100%;
+
background:#B8A789;
-
height: 100%;
+
}
-
}
+
#follow
-
#imageFlow {
+
{
-
position: absolute;
+
display:none;
-
width: 100%;
+
}
-
height: 80%;
+
#countdown
-
left: 0%;
+
{
-
top: 10%;
+
display:none;
-
background: #000;
+
}
-
}
+
#visit
-
#imageFlow .diapo {
+
{
-
position: absolute;
+
display:none;
-
left: -1000px;
+
}
-
cursor: pointer;
+
#demo
-
-ms-interpolation-mode: nearest-neighbor;
+
{
-
}
+
position:relative;
-
#imageFlow .link {
+
top:10px;
-
border: dotted #fff 1px;
+
height:230px;
-
margin-left: -1px;
+
width:1000px;
-
margin-bottom: -1px;
+
left:0px;
-
}
+
overflow:hidden;
-
#imageFlow .bank {
+
}
-
visibility: hidden;
+
#demo img {
-
}
+
top:10px;
-
#imageFlow .top {
+
height:230px;
-
position: absolute;
+
width:300px;
-
width: 100%;
+
}
-
height: 40%;
+
#indemo {
-
background: #181818;
+
float: left;
-
}
+
width: 800%;
-
#imageFlow .text {
+
}
-
position: absolute;
+
#demo1 {
-
left: 0px;
+
float: left;
-
width: 100%;
+
}
-
bottom: 16%;
+
#demo2 {
-
text-align: center;
+
padding:0px 3px;
-
color: #FFF;
+
float: left;
-
font-family: verdana, arial, Helvetica, sans-serif;
+
}
-
z-index: 1000;
+
#footer-box
-
}
+
{
-
#imageFlow .title {
+
position:absolute;
-
font-size: 0.9em;
+
top:2000px;
-
font-weight: bold;
+
}
-
}
+
.team_images img
-
#imageFlow .legend {
+
{
-
font-size: 0.8em;
+
 
-
}
+
height:280px;
-
#imageFlow .scrollbar {
+
}
-
position: absolute;
+
#preview_images
-
left: 10%;
+
{
-
bottom: 10%;
+
position:relative;
-
width: 80%;
+
top:20px;
-
height: 16px;
+
background:transparent;
-
z-index: 1000;
+
height:600px;
-
}
+
left:10px;
-
#imageFlow .track {
+
width:980px;
-
position: absolute;
+
}
-
left: 1%;
+
#screen {
-
width: 98%;
+
  position: relative;
-
height: 16px;
+
  left: 0px;
-
filter: alpha(opacity=30);
+
  top: 30px;
-
opacity: 0.3;
+
  width: 1000px;
-
}
+
  height: 600px;
-
#imageFlow .arrow-left {
+
  background:transparent;
-
position: absolute;
+
}
-
}
+
#screen img {
-
#imageFlow .arrow-right {
+
  position: absolute;
-
position: absolute;
+
  cursor: pointer;
-
right: 0px;
+
  visibility: hidden;
-
}
+
  width: 200px;
-
#imageFlow .bar {
+
  height:20px;
-
position: absolute;
+
}
-
height: 16px;
+
#screen .tvover {
-
left: 25px;
+
  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()
 +
{
 +
  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';
 +
});
-
var imf = function () {
 
-
var lf = 0;
 
-
var instances = [];
 
-
function getElementsByClass (object, tag, className) {
 
-
var o = object.getElementsByTagName(tag);
 
-
for ( var i = 0, n = o.length, ret = []; i < n; i++)
 
-
if (o[i].className == className) ret.push(o[i]);
 
-
if (ret.length == 1) ret = ret[0];
 
-
return ret;
 
-
}
 
-
function addEvent (o, e, f) {
 
-
if (window.addEventListener) o.addEventListener(e, f, false);
 
-
else if (window.attachEvent) r = o.attachEvent('on' + e, f);
 
-
}
 
-
function createReflexion (cont, img) {
 
-
var flx = false;
 
-
if (document.createElement("canvas").getContext) {
 
-
flx = document.createElement("canvas");
 
-
flx.width = img.width;
 
-
flx.height = img.height;
 
-
var context = flx.getContext("2d");
 
-
context.translate(0, img.height);
 
-
context.scale(1, -1);
 
-
context.drawImage(img, 0, 0, img.width, img.height);
 
-
context.globalCompositeOperation = "destination-out";
 
-
var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);
 
-
gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
 
-
gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
 
-
context.fillStyle = gradient;
 
-
context.fillRect(0, 0, img.width, img.height * 2);
 
-
} else {
 
-
/* ---- DXImageTransform ---- */
 
-
flx    = document.createElement('img');
 
-
flx.src = img.src;
 
-
flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +
 
-
                  'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
 
-
  (img.height * .25) + ')';
 
-
}
 
-
/* ---- insert Reflexion ---- */
 
-
flx.style.position = 'absolute';
 
-
flx.style.left    = '-1000px';
 
-
cont.appendChild(flx);
 
-
return flx;
 
-
}
 
-
/* //////////// ==== ImageFlow Constructor ==== //////////// */
 
-
function ImageFlow(oCont, size, zoom, border) {
 
-
this.diapos    = [];
 
-
this.scr        = false;
 
-
this.size      = size;
 
-
this.zoom      = zoom;
 
-
this.bdw        = border;
 
-
this.oCont      = oCont;
 
-
this.oc        = document.getElementById(oCont);
 
-
this.scrollbar  = getElementsByClass(this.oc,  'div', 'scrollbar');
 
-
this.text      = getElementsByClass(this.oc,  'div', 'text');
 
-
this.title      = getElementsByClass(this.text, 'div', 'title');
 
-
this.legend    = getElementsByClass(this.text, 'div', 'legend');
 
-
this.bar        = getElementsByClass(this.oc,  'img', 'bar');
 
-
this.arL        = getElementsByClass(this.oc,  'img', 'arrow-left');
 
-
this.arR        = getElementsByClass(this.oc,  'img', 'arrow-right');
 
-
this.bw        = this.bar.width;
 
-
this.alw        = this.arL.width - 5;
 
-
this.arw        = this.arR.width - 5;
 
-
this.bar.parent = this.oc.parent  = this;
 
-
this.arL.parent = this.arR.parent = this;
 
-
this.view      = this.back      = -1;
 
-
this.resize();
 
-
this.oc.onselectstart = function () { return false; }
 
-
/* ---- create images ---- */
 
-
var img  = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');
 
-
this.NF = img.length;
 
-
for (var i = 0, o; o = img[i]; i++) {
 
-
this.diapos[i] = new Diapo(this, i,
 
-
o.rel,
 
-
o.title || '- ' + i + ' -',
 
-
o.innerHTML || o.rel,
 
-
o.href || '',
 
-
o.target || '_self'
 
-
);
 
-
}
 
-
/* ==== add mouse wheel events ==== */
 
-
if (window.addEventListener)
 
-
this.oc.addEventListener('DOMMouseScroll', function(e) {
 
-
this.parent.scroll(-e.detail);
 
-
}, false);
 
-
else this.oc.onmousewheel = function () {
 
-
this.parent.scroll(event.wheelDelta);
 
-
}
 
-
/* ==== scrollbar drag N drop ==== */
 
-
this.bar.onmousedown = function (e) {
 
-
if (!e) e = window.event;
 
-
var scl = e.screenX - this.offsetLeft;
 
-
var self = this.parent;
 
-
/* ---- move bar ---- */
 
-
this.parent.oc.onmousemove = function (e) {
 
-
if (!e) e = window.event;
 
-
self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';
 
-
self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);
 
-
if (self.view != self.back) self.calc();
 
-
return false;
 
-
}
 
-
/* ---- release scrollbar ---- */
 
-
this.parent.oc.onmouseup = function (e) {
 
-
self.oc.onmousemove = null;
 
-
return false;
 
-
}
 
-
return false;
 
-
}
 
-
/* ==== right arrow ==== */
 
-
this.arR.onclick = this.arR.ondblclick = function () {
 
-
if (this.parent.view < this.parent.NF - 1)
 
-
this.parent.calc(1);
 
-
}
 
-
/* ==== Left arrow ==== */
 
-
this.arL.onclick = this.arL.ondblclick = function () {
 
-
if (this.parent.view > 0)
 
-
this.parent.calc(-1);
 
-
}
 
-
}
 
-
/* //////////// ==== ImageFlow prototype ==== //////////// */
 
-
ImageFlow.prototype = {
 
-
/* ==== targets ==== */
 
-
calc : function (inc) {
 
-
if (inc) this.view += inc;
 
-
var tw = 0;
 
-
var lw = 0;
 
-
var o = this.diapos[this.view];
 
-
if (o && o.loaded) {
 
-
/* ---- reset ---- */
 
-
var ob = this.diapos[this.back];
 
-
if (ob && ob != o) {
 
-
ob.img.className = 'diapo';
 
-
ob.z1 = 1;
 
-
}
 
-
/* ---- update legend ---- */
 
-
this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);
 
-
this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);
 
-
/* ---- update hyperlink ---- */
 
-
if (o.url) {
 
-
o.img.className = 'diapo link';
 
-
window.status = 'hyperlink: ' + o.url;
 
-
} else {
 
-
o.img.className = 'diapo';
 
-
window.status = '';
 
-
}
 
-
/* ---- calculate target sizes & positions ---- */
 
-
o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;
 
-
var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
 
-
var x = x0 + o.w1 + this.bdw;
 
-
for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
 
-
if (o.loaded) {
 
-
o.x1 = x;
 
-
o.w1 = (this.ht / o.r) * this.size;
 
-
x  += o.w1 + this.bdw;
 
-
tw  += o.w1 + this.bdw;
 
-
}
 
-
}
 
-
x = x0 - this.bdw;
 
-
for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
 
-
if (o.loaded) {
 
-
o.w1 = (this.ht / o.r) * this.size;
 
-
o.x1 = x - o.w1;
 
-
x  -= o.w1 + this.bdw;
 
-
tw  += o.w1 + this.bdw;
 
-
lw  += o.w1 + this.bdw;
 
-
}
 
-
}
 
-
/* ---- move scrollbar ---- */
 
-
if (!this.scr && tw) {
 
-
var r = (this.ws - this.alw - this.arw - this.bw) / tw;
 
-
this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
 
-
}
 
-
/* ---- save preview view ---- */
 
-
this.back = this.view;
 
-
}
 
-
},
 
-
/* ==== mousewheel scrolling ==== */
 
-
scroll : function (sc) {
 
-
if (sc < 0) {
 
-
if (this.view < this.NF - 1) this.calc(1);
 
-
} else {
 
-
if (this.view > 0) this.calc(-1);
 
-
}
 
-
},
 
-
/* ==== resize  ==== */
 
-
resize : function () {
 
-
this.wh = this.oc.clientWidth;
 
-
this.ht = this.oc.clientHeight;
 
-
this.ws = this.scrollbar.offsetWidth;
 
-
this.calc();
 
-
this.run(true);
 
-
},
 
-
/* ==== move all images  ==== */
 
-
run : function (res) {
 
-
var i = this.NF;
 
-
while (i--) this.diapos[i].move(res);
 
-
}
 
-
}
 
-
/* //////////// ==== Diapo Constructor ==== //////////// */
 
-
Diapo = function (parent, N, src, title, text, url, target) {
 
-
this.parent        = parent;
 
-
this.loaded        = false;
 
-
this.title        = title;
 
-
this.text          = text;
 
-
this.url          = url;
 
-
this.target        = target;
 
-
this.N            = N;
 
-
this.img          = document.createElement('img');
 
-
this.img.src      = src;
 
-
this.img.parent    = this;
 
-
this.img.className = 'diapo';
 
-
this.x0            = this.parent.oc.clientWidth;
 
-
this.x1            = this.x0;
 
-
this.w0            = 0;
 
-
this.w1            = 0;
 
-
this.z1            = 1;
 
-
this.img.parent    = this;
 
-
this.img.onclick  = function() { this.parent.click(); }
 
-
this.parent.oc.appendChild(this.img);
 
-
/* ---- display external link ---- */
 
-
if (url) {
 
-
this.img.onmouseover = function () { this.className = 'diapo link'; }
 
-
this.img.onmouseout  = function () { this.className = 'diapo'; }
 
-
}
 
-
}
 
-
/* //////////// ==== Diapo prototype ==== //////////// */
 
-
Diapo.prototype = {
 
-
/* ==== HTML rendering ==== */
 
-
move : function (res) {
 
-
if (this.loaded) {
 
-
var sx = this.x1 - this.x0;
 
-
var sw = this.w1 - this.w0;
 
-
if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
 
-
/* ---- paint only when moving ---- */
 
-
this.x0 += sx * .1;
 
-
this.w0 += sw * .1;
 
-
if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {
 
-
/* ---- paint only visible images ---- */
 
-
this.visible = true;
 
-
var o = this.img.style;
 
-
var h = this.w0 * this.r;
 
-
/* ---- diapo ---- */
 
-
o.left  = Math.round(this.x0) + 'px';
 
-
o.bottom = Math.floor(this.parent.ht * .25) + 'px';
 
-
o.width  = Math.round(this.w0) + 'px';
 
-
o.height = Math.round(h) + 'px';
 
-
/* ---- reflexion ---- */
 
-
if (this.flx) {
 
-
var o = this.flx.style;
 
-
o.left  = Math.round(this.x0) + 'px';
 
-
o.top    = Math.ceil(this.parent.ht * .75 + 1) + 'px';
 
-
o.width  = Math.round(this.w0) + 'px';
 
-
o.height = Math.round(h) + 'px';
 
-
}
 
-
} else {
 
-
/* ---- disable invisible images ---- */
 
-
if (this.visible) {
 
-
this.visible = false;
 
-
this.img.style.width = '0px';
 
-
if (this.flx) this.flx.style.width = '0px';
 
-
}
 
-
}
 
-
}
 
-
} else {
 
-
/* ==== image onload ==== */
 
-
if (this.img.complete && this.img.width) {
 
-
/* ---- get size image ---- */
 
-
this.iw    = this.img.width;
 
-
this.ih    = this.img.height;
 
-
this.r      = this.ih / this.iw;
 
-
this.loaded = true;
 
-
/* ---- create reflexion ---- */
 
-
this.flx    = createReflexion(this.parent.oc, this.img);
 
-
if (this.parent.view < 0) this.parent.view = this.N;
 
-
this.parent.calc();
 
-
}
 
-
}
 
-
},
 
-
/* ==== diapo onclick ==== */
 
-
click : function () {
 
-
if (this.parent.view == this.N) {
 
-
/* ---- click on zoomed diapo ---- */
 
-
if (this.url) {
 
-
/* ---- open hyperlink ---- */
 
-
window.open(this.url, this.target);
 
-
} else {
 
-
/* ---- zoom in/out ---- */
 
-
this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
 
-
this.parent.calc();
 
-
}
 
-
} else {
 
-
/* ---- select diapo ---- */
 
-
this.parent.view = this.N;
 
-
this.parent.calc();
 
-
}
 
-
return false;
 
-
}
 
-
}
 
-
/* //////////// ==== public methods ==== //////////// */
 
-
return {
 
-
/* ==== initialize script ==== */
 
-
create : function (div, size, zoom, border) {
 
-
/* ---- instanciate imageFlow ---- */
 
-
var load = function () {
 
-
var loaded = false;
 
-
var i = instances.length;
 
-
while (i--) if (instances[i].oCont == div) loaded = true;
 
-
if (!loaded) {
 
-
/* ---- push new imageFlow instance ---- */
 
-
instances.push(
 
-
new ImageFlow(div, size, zoom, border)
 
-
);
 
-
/* ---- init script (once) ---- */
 
-
if (!imf.initialized) {
 
-
imf.initialized = true;
 
-
/* ---- window resize event ---- */
 
-
addEvent(window, 'resize', function () {
 
-
var i = instances.length;
 
-
while (i--) instances[i].resize();
 
-
});
 
-
/* ---- stop drag N drop ---- */
 
-
addEvent(document.getElementById(div), 'mouseout', function (e) {
 
-
if (!e) e = window.event;
 
-
var tg = e.relatedTarget || e.toElement;
 
-
if (tg && tg.tagName == 'HTML') {
 
-
var i = instances.length;
 
-
while (i--) instances[i].oc.onmousemove = null;
 
-
}
 
-
return false;
 
-
});
 
-
/* ---- set interval loop ---- */
 
-
setInterval(function () {
 
-
var i = instances.length;
 
-
while (i--) instances[i].run();
 
-
}, 16);
 
-
}
 
-
}
 
-
}
 
-
/* ---- window onload event ---- */
 
-
addEvent(window, 'load', function () { load(); });
 
-
}
 
-
}
 
-
}();
 
-
/* ==== create imageFlow ==== */
 
-
//          div ID    , size, zoom, border
 
-
imf.create("imageFlow", 0.15, 1.5, 10);
 
 +
 +
 +
 +
 +
var Library = {};
 +
Library.ease = function () {
 +
this.target = 0;
 +
this.position = 0;
 +
this.move = function (target, speed)
 +
{
 +
  this.position += (target - this.position) * speed;
 +
}
 +
}
 +
var tv = {
 +
O : [],
 +
screen : {},
 +
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);
 +
}
 +
}
 +
var mouse = {
 +
x : 0,
 +
y : 0
 +
}
 +
document.onmousemove = function(e)
 +
{
 +
if (window.event) e = window.event;
 +
mouse.x = e.clientX;
 +
mouse.y = e.clientY;
 +
return false;
 +
}
</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)};
-
<div id="imageFlow">
+
</script>  
-
<div class="top">
+
-
</div>
+
-
<div class="bank">
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="Myselves" href="http://www.jscode.cn/">
+
-
My identity lies in not knowing who I am</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="Discoveries" href="http://www.jscode.cn/">
+
-
...are made by not following instructions</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="Nothing" href="http://jscode.cn/">
+
-
...can come between us</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="New life" href="http://www.jscode.cn/">
+
-
Here you come!</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="Optimists" href="http://www.html.org.cn/">
+
-
They don&#39;t know all the facts yet</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="Empathy" href="http://www.jscode.cn/">
+
-
Emotional intimacy</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="Much work" href="http://www.jscode.cn/">
+
-
...remains to be done before we can announce our total failure to make any
+
-
progress</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="System error" href="http://www.jscode.cn/">
+
-
Errare Programma Est</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="Nonexistance" href="http://bbs.html.org.cn/">
+
-
There&#39;s no such thing</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="Inside" href="http://www.jscode.cn/">
+
-
I抦 now trapped, without hope of escape or rescue</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="E-Slaves" href="http://www.luwei.net.cn/">
+
-
The World is flat</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="l0v3" href="http://www.jscode.cn/">
+
-
1 l0v3 j00 - f0r3v3r</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="T minus zero" href="http://www.jscode.cn/">
+
-
111 111 111 x 111 111 111 = 12345678987654321</a>
+
-
<a rel="src="/wiki/images/e/e6/Whu-1.jpg"" title="The End" href="http://www.jscode.cn/">
+
-
...has not been written yet</a> </div>
+
-
<div class="text">
+
-
<div class="title">
+
-
Loading</div>
+
-
<div class="legend">
+
-
Please wait...</div>
+
-
</div>
+
-
<div class="scrollbar">
+
-
<img class="track" src="images/08081201sb.gif" alt="">
+
-
<img class="arrow-left" src="images/08081201sl.gif" alt="">
+
-
<img class="arrow-right" src="images/08081201sr.gif" alt="">
+
-
<img class="bar" src="images/08081201sc.gif" alt=""> </div>
+
</div>
</div>
 +
</div>
 +
<hr style="top:4px;"></hr>
 +
<hr style="top:236px;"></hr>
 +
 +
<div id="screen">
 +
<div class="introduction">
 +
&nbsp;&nbsp;&nbsp;&nbsp;We have spent a busy summer full of happiness and fun. The following photos record this precious experience.<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp;Have a try and click on what you want to see clearly!
 +
</div></div>
 +
<div id="bankImages">
 +
<img src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg">
 +
<img src="https://static.igem.org/mediawiki/2011/f/f1/Whu-4-2.jpg">
 +
<img src="https://static.igem.org/mediawiki/2011/c/c4/Whu-8.jpg">
 +
<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>
 +
<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 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"