Team:WHU-China/Team/Gallary

From 2011.igem.org

(Difference between revisions)
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>
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
+
<title>鐐瑰嚮灏忓浘閲嶆柊鎺掑簭鍥剧墖骞舵樉绀哄ぇ鍥綣S浠ｇ爜_www.update8.com</title>
-
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
-
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
+
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
 +
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
<style type="text/css">
-
#countdown
+
html { overflow: hidden; }
-
{
+
body { position: absolute; margin: 0px; padding: 0px; background: #000; width: 100%; height: 100%; }
-
display:none;
+
#screen { position: absolute; background: #000; left: 50%; top: 50%; width: 960px; height: 520px; margin-left: -480px; margin-top: -260px; }
-
}
+
#a { position: absolute; font-family: arial; font-size: 12px; color: #FFF; cursor: pointer; overflow: hidden; width: 0px; }
-
#visit
+
#b { position: absolute; }
-
{
+
-
display:none;
+
-
}
+
-
#demo
+
-
{
+
-
position:relative;
+
-
top:15px;
+
-
height:260px;
+
-
width:1000px;
+
-
left:0px;
+
-
overflow:hidden;
+
-
}
+
-
#demo img {
+
-
top:20px;
+
-
height:260px;
+
-
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: absolute; background: #000; left: 50%; top: 50%; width: 960px; height: 520px; margin-left: -480px; margin-top: 260px; }
+
-
#woyu { position: absolute; font-family: arial; font-size: 12px; color: #FFF; cursor: pointer; overflow: hidden; width: 0px; }
+
-
#wowu { position: absolute; }
+
</style>
</style>
 +
<script type="text/javascript">
 +
// ======================================================================
 +
// script by Gerard Ferrandez | February, 2010
 +
// --------------------------------------------------------------------
 +
// http://www.dhteumeuleu.com | http://www.twitter.com/ge1doot
 +
// Javascript code licensed under CC-BY-NC - Do not remove this notice
 +
// ======================================================================
 +
 +
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],
 +
my = [0,1,0,-1,0,2,0,-2,0,3,0,-3,0,4,0,-4],
 +
bw = 10;
 +
 +
////////////////////////////////////////////////////////////////////////////
 +
// ============== grid class =============
 +
var grid = {
 +
// ===== calculate grid =====
 +
calc : function () {
 +
// ---- empty grid ----
 +
this.grid = new Array(24);
 +
for (var i = 0; i < 24; i++)
 +
this.grid[i] = 0;
 +
// ---- load grid ----
 +
var i = 0, o;
 +
while ( o = divs[i++] )
 +
this.add(o);
 +
},
 +
// ===== return cell value =====
 +
cell : function (x, y) {
 +
return this.grid[x * 4 + y];
 +
},
 +
// ===== area weight =====
 +
weight : function (x, y, w, h) {
 +
var gw = 0;
 +
for(var i = 0; i < w; i++)
 +
for(var j = 0; j < h; j++)
 +
gw += this.cell(i + x, j + y);
 +
return gw;
 +
},
 +
// ===== add div =====
 +
add : function (o) {
 +
for(var i = 0; i < o.w; i++)
 +
for(var j = 0; j < o.h; j++)
 +
this.grid[(i + o.x) * 4 + (j + o.y)] += o.f ? 20 : 1;
 +
}
 +
}
 +
 +
////////////////////////////////////////////////////////////////////////////
 +
// ============== tween class =============
 +
var tween = {
 +
// ===== tween stack =====
 +
divs : new Array(),
 +
// ===== create tween object =====
 +
tween : function (o, x, y, w, h) {
 +
return {
 +
div : o,
 +
x : x,
 +
y : y,
 +
w : w,
 +
h : h
 +
};
 +
},
 +
// ===== add new tween =====
 +
add : function (o, x, y, w, h) {
 +
if (o == true) return false;
 +
// ---- consolidate with last move ----
 +
var t = this.divs.length - 1;
 +
if (t >= 0 && this.divs[t].div == o)
 +
this.divs[t] = this.tween(o, x, y, w, h);
 +
else {
 +
// ---- push tween ----
 +
this.divs.push(
 +
this.tween(o, x, y, w, h)
 +
);
 +
}
 +
},
 +
// ======== start next tween =========
 +
next : function () {
 +
if (this.divs.length) {
 +
var t = this.divs[0];
 +
var o = t.div;
 +
o.dx = t.x - o.xc;
 +
o.dy = t.y - o.yc;
 +
o.dw = t.w - o.wc;
 +
o.dh = t.h - o.hc;
 +
o.s = 1;
 +
o.p = 0;
 +
return o;
 +
} else return false;
 +
}
 +
}
 +
////////////////////////////////////////////////////////////////////////////
 +
// =============== Div constructor ===============
 +
var Frame = function (i, div) {
 +
// ---- random position ----
 +
do {
 +
this.x = this.x0 = Math.floor(Math.random() * 6);
 +
this.y = this.y0 = Math.floor(Math.random() * 4);
 +
} while (moves[this.x * 4 + this.y]);
 +
moves[this.x * 4 + this.y] = true;
 +
// ---- dimensions ----
 +
var img = div.getElementsByTagName("img")[0];
 +
var wh = img.alt.split(",");
 +
img.alt = "";
 +
this.w = 1;
 +
this.h = 1;
 +
this.xc = this.x + .5;
 +
this.yc = this.y + .5;
 +
this.wc = 0;
 +
this.hc = 0;
 +
this.w1 = wh[0] * 1;
 +
this.h1 = wh[1] * 1;
 +
this.i = i;
 +
this.s = 0;
 +
div.parent = this;
 +
div.onclick = function () { this.parent.click(); }
 +
this.css = div.style;
 +
// ---- push tween ----
 +
tween.add(this, this.x, this.y, 1, 1);
 +
}
 +
 +
// ========== calculate moving cost ===========
 +
Frame.prototype.costMove = function (m) {
 +
// ---- what direction ----
 +
var sx = mx[m] > 0 ? 1 : mx[m] < 0 ? -1 : 0,
 +
    sy = my[m] > 0 ? 1 : my[m] < 0 ? -1 : 0,
 +
    cm = 0;
 +
// ---- horizontal ----
 +
if (sx != 0) {
 +
for (var i = this.x; i != this.x + mx[m]; i += sx)
 +
cm += grid.weight(i, this.y, this.w, this.h);
 +
// ---- vertical ----
 +
} else if (sy != 0) {
 +
for (var i = this.y; i != this.y + my[m]; i += sy)
 +
cm += grid.weight(this.x, i, this.w, this.h);
 +
}
 +
// ---- return cost ----
 +
return cm;
 +
}
 +
 +
// ============ determine moving direction =============
 +
Frame.prototype.findMove = function () {
 +
var d = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
 +
    mx = 1000,
 +
    cm, m;
 +
// =========== loop distance ============
 +
for (var p = 0; p < 4 && mx >= 20; p++) {
 +
// ======== vertical neighbors weights ========
 +
for (var i = 0; i < this.w; i++) {
 +
// ---- up ----
 +
if (this.y - p > 0)
 +
d[3 + p * 4] += grid.cell(this.x + i, this.y - (p + 1));
 +
else
 +
// ---- border ----
 +
d[3 + p * 4] = 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 ----
 +
d[1 + p * 4] = 100;
 +
}
 +
// ======== horizontal neighbors weights ========
 +
for (var j = 0; j < this.h; j++) {
 +
// ---- left ----
 +
if (this.x - p > 0)
 +
d[2 + p * 4] += grid.cell(this.x - (p + 1), this.y + j);
 +
else
 +
// ---- border ----
 +
d[2 + p * 4] = 100;
 +
// ---- right ----
 +
if (this.x + this.w + p < 6)
 +
d[0 + p * 4] += grid.cell(this.x + this.w + p, this.y + j);
 +
else
 +
// ---- border ----
 +
d[0 + p * 4] = 100;
 +
}
 +
// =============== find direction to the weakest neighbor ================
 +
mx = 1000;
 +
for (var i = 0; i < 4 * (p + 1); i++) {
 +
if ( d[i] < mx) {
 +
// ---- store min values ----
 +
mx = d[i];
 +
m = i;
 +
cm = this.costMove(i);
 +
// ---- equality case ----
 +
} else if ( d[i] == mx) {
 +
// ---- less costly move ----
 +
var cmm = this.costMove(i);
 +
if (cmm < cm) {
 +
cm = cmm;
 +
m = i;
 +
mx = d[i];
 +
}
 +
}
 +
}
 +
}
 +
// ====== return direction [0 = right, 1 = bottom, 2 = left, 3 = up] ======
 +
return m;
 +
}
 +
 +
// ============ HTML rendering =============
 +
Frame.prototype.paint = function () {
 +
this.css.left  = Math.round(bw + this.xc * wu) + "px";
 +
this.css.top    = Math.round(bw + this.yc * hu) + "px";
 +
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>
</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>
 
-
</div>
 
-
 
<div id="screen">
<div id="screen">
-
   <div id="woyu"><img id="wowu" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" width="503" height="376" alt="3,3"></div>
+
   <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 id="woyu"><img id="wowu" src="https://static.igem.org/mediawiki/2011/f/f1/Whu-4-2.jpg" width="465" height="373" alt="3,3"></div>
+
   <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>
-
   <div id="woyu"><img id="wowu" src="https://static.igem.org/mediawiki/2011/c/c4/Whu-8.jpg" width="465" height="373" alt="3,3"></div>
+
   <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>
-
   <div id="woyu"><img id="wowu" src="https://static.igem.org/mediawiki/2011/f/f6/Whu-10.jpg" width="301" height="503" alt="2,4"></div>
+
   <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 id="woyu"><img id="wowu" src="https://static.igem.org/mediawiki/2011/6/69/Whu-13.jpg" width="375" height="500" alt="2,4"></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="woyu"><img id="wowu" src="https://static.igem.org/mediawiki/2011/e/e1/Whu-18.jpg" width="370" height="501" alt="2,4"></div>
+
   <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>
-
   <div id="woyu"><img id="wowu" src="https://static.igem.org/mediawiki/2011/5/57/Whu-47.jpg" width="465" height="373" alt="3,3"></div>
+
   <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>
-
   <div id="woyu"><img id="wowu" src="https://static.igem.org/mediawiki/2011/a/a8/Whu-61.jpg" width="307" height="499" alt="2,4"></div>
+
   <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>
-
   <div id="woyu"><img id="wowu" src="https://static.igem.org/mediawiki/2011/f/fc/Whu-43.jpg" width="500" height="376" alt="3,3"></div>
+
   <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>
 +
</div>
</div>
-
<script type="text/javascript" src=" https://2011.igem.org/Team:WHU-China/bill.js?action=raw&ctype=text/js">
+
<script type="text/javascript">  
// ==== start script ====  
// ==== start script ====  
setTimeout(function() {  
setTimeout(function() {  
Line 118: Line 414:
}, 100);  
}, 100);  
</script>
</script>
-
 
-
 
-
 
</body>
</body>
-
 
</html>
</html>
-
{{WHUcss}}
 

Revision as of 15:26, 1 October 2011

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 鐐瑰嚮灏忓浘閲嶆柊鎺掑簭鍥剧墖骞舵樉绀哄ぇ鍥綣S浠ｇ爜_www.update8.com

3,3
3,3
3,3
2,4
2,4
2,4
3,3
2,4
3,3

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