Team:WHU-China/Team/Gallary
From 2011.igem.org
(Difference between revisions)
(259 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<head> | <head> | ||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> | ||
+ | <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; | position:absolute; | ||
- | top:200px; | + | 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> | </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'; | ||
+ | }); | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | 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> | ||
</head> | </head> | ||
<body> | <body> | ||
- | <div id=" | + | <div id="content1"> |
- | <div | + | <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> | ||
- | <div id=" | + | <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> | ||
+ | <hr style="top:4px;"></hr> | ||
+ | <hr style="top:236px;"></hr> | ||
+ | <div id="screen"> | ||
+ | <div class="introduction"> | ||
+ | We have spent a busy summer full of happiness and fun. The following photos record this precious experience.<br> | ||
+ | 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> | </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}} | {{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!
Have a try and click on what you want to see clearly!