Team:Beijing BHSF/Photo

From 2013hs.igem.org

(Difference between revisions)
 
(89 intermediate revisions not shown)
Line 1: Line 1:
-
 
<html>
<html>
-
<head>
 
-
<title>Photo</title>
 
-
<style type="text/css">
 
-
html {
 
-
overflow: hidden;
 
-
}
 
-
body {
 
-
position: absolute;
 
-
margin: 0px;
 
-
padding: 0px;
 
-
background: #111;
 
-
width: 100%;
 
-
height: 100%;
 
-
}
 
-
#screen {
 
-
position: absolute;
 
-
left: 10%;
 
-
top: 10%;
 
-
width: 80%;
 
-
height: 80%;
 
-
background: #000;
 
-
}
 
-
#screen img {
 
-
position: absolute;
 
-
cursor: pointer;
 
-
visibility: hidden;
 
-
width: 0px;
 
-
height: 0px;
 
-
}
 
-
#screen .tvover {
 
-
border: solid #876;
 
-
opacity: 1;
 
-
filter: alpha(opacity=100);
 
-
}
 
-
#screen .tvout {
 
-
border: solid #fff;
 
-
opacity: 0.7;
 
-
}
 
-
#bankImages {
 
-
display: none;
 
-
}
 
-
</style>
 
-
<script type="text/javascript">
 
-
var Library = {};
 
-
Library.ease = function () {
 
-
this.target = 0;
 
-
this.position = 0;
 
-
this.move = function (target, speed)
 
-
{
 
-
this.position += (target - this.position) * speed;
 
-
}
 
-
}
 
-
var tv = {
+
<head>
-
/* ==== variables ==== */
+
-
O : [],
+
-
screen : {},
+
-
grid : {
+
-
size      : 4,  // 4x4 grid
+
-
borderSize : 6,  // borders size
+
-
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 // camera Focal Length
+
-
},
+
-
/* ==== init script ==== */
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
init : function ()
+
<link rel="stylesheet" type="text/css" media="all" href="https://2013hs.igem.org/Team:Beijing_BHSF/css/style.css?action=raw&ctype=text/css" />
-
{
+
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
-
this.screen.obj = document.getElementById('screen');
+
<script type="text/javascript" src="https://2013hs.igem.org/Team:Beijing_BHSF/js/jquery.min?action=raw&ctype=text/javascript"></script>
-
var img = document.getElementById('bankImages').getElementsByTagName('img');
+
<script type="text/javascript" src="https://2013hs.igem.org/Team:Beijing_BHSF/js/jquery.flexslider.min?action=raw&ctype=text/javascript"></script>
-
this.screen.obj.onselectstart = function () { return false; }
+
<script type="text/javascript" charset="utf-8">
-
this.screen.obj.ondrag        = function () { return false; }
+
var $ = jQuery.noConflict();
-
/* ==== create images grid ==== */
+
  $(window).load(function() {
-
var ni = 0;
+
    $('.flexslider').flexslider({
-
var n = (tv.grid.size / 2) - .5;
+
          animation: "slide"
-
for (var y = -n; y <= n; y++)
+
    });
-
{
+
  });
-
for (var x = -n; x <= n; x++)
+
</script>
-
{
+
</head>
-
/* ==== create HTML image element ==== */
+
<head>
-
var o = document.createElement('img');
+
<style>
-
var i = img[(ni++) % img.length];
+
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
-
o.className = 'tvout';
+
    display:none;}
-
o.src = i.src;
+
-
tv.screen.obj.appendChild(o);
+
-
/* ==== 3D coordinates ==== */
+
-
o.point3D = {
+
-
x  : x,
+
-
y  : y,
+
-
z  : new Library.ease()
+
-
};
+
-
/* ==== push object ==== */
+
-
o.point2D = {};
+
-
o.ratioImage = 1;
+
-
tv.O.push(o);
+
-
/* ==== on mouse over event ==== */
+
-
o.onmouseover = function ()
+
-
{
+
-
if (!tv.grid.zoomed)
+
-
{
+
-
if (tv.o)
+
-
{
+
-
/* ==== mouse out ==== */
+
-
tv.o.point3D.z.target = 0;
+
-
tv.o.className = 'tvout';
+
-
}
+
-
/* ==== mouse over ==== */
+
-
this.className = 'tvover';
+
-
this.point3D.z.target = -.5;
+
-
tv.o = this;
+
-
}
+
-
}
+
-
/* ==== on click event ==== */
+
-
o.onclick = function ()
+
-
{
+
-
if (!tv.grid.zoomed)
+
-
{
+
-
/* ==== zoom in ==== */
+
-
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){
+
-
/* ==== zoom out ==== */
+
-
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;
+
-
}
+
-
}
+
-
}
+
-
/* ==== 3D transform function ==== */
+
-
o.calc = function ()
+
-
{
+
-
/* ==== ease mouseover ==== */
+
-
this.point3D.z.move(this.point3D.z.target, .5);
+
-
/* ==== assign 3D coords ==== */
+
-
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;
+
-
/* ==== perform rotations ==== */
+
-
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;
+
-
/* ==== 2D transformation ==== */
+
-
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
+
-
                  )
+
-
                );
+
-
/* ==== image size ratio ==== */
+
-
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);
+
-
}
+
-
}
+
-
/* ==== rendering ==== */
+
-
o.draw = function ()
+
-
{
+
-
if (this.complete)
+
-
{
+
-
/* ==== paranoid image load ==== */
+
-
if (!this.loaded)
+
-
{
+
-
if (!this.img)
+
-
{
+
-
/* ==== create internal image ==== */
+
-
this.img = new Image();
+
-
this.img.src = this.src;
+
-
}
+
-
if (this.img.complete)
+
-
{
+
-
/* ==== get width / height ratio ==== */
+
-
this.style.visibility = 'visible';
+
-
this.ratioImage = this.img.width / this.img.height;
+
-
this.loaded = true;
+
-
this.img = false;
+
-
}
+
-
}
+
-
/* ==== HTML rendering ==== */
+
-
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);
+
-
}
+
-
}
+
-
}
+
-
}
+
-
/* ==== start script ==== */
+
-
tv.resize();
+
-
mouse.y = tv.screen.y + tv.screen.h;
+
-
mouse.x = tv.screen.x + tv.screen.w;
+
-
tv.run();
+
-
},
+
-
/* ==== resize window ==== */
+
#top-section {
-
resize : function ()
+
    width: 965px;
-
{
+
    height: 0;
-
var o = tv.screen.obj;
+
    margin: 0 auto;
-
tv.screen.w = o.offsetWidth / 2;
+
    padding: 0;
-
tv.screen.h = o.offsetHeight / 2;
+
    border: none;}
-
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;
+
-
}
+
-
},
+
-
/* ==== main loop ==== */
+
#content {
-
run : function ()
+
left: 0px;
-
{
+
width: 99%;
-
/* ==== motion ease ==== */
+
-
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);
+
-
/* ==== angles sin and cos ==== */
+
-
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);
+
-
/* ==== loop through all images ==== */
+
-
for (var i = 0, o; o = tv.O[i]; i++)
+
-
{
+
-
o.calc();
+
-
o.draw();
+
-
}
+
-
/* ==== loop ==== */
+
-
setTimeout(tv.run, 32);
+
-
}
+
}
}
 +
</style>
 +
<head>
-
/* ==== global mouse position ==== */
 
-
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>
 
<body>
<body>
-
<div id="screen"></div>
+
  <div id="header">
 +
        <div class="header_content">
 +
     
 +
        <div class="logo"><a href="https://2013hs.igem.org/Team:Beijing_BHSF">BHSF</a> <span>| Best High School Forever</span></div>
 +
       
 +
        <div class="menu">
 +
            <ul>
 +
                <li><a href="https://2013hs.igem.org/Team:Beijing_BHSF">Home</a></li>
 +
                <li><a href="https://2013hs.igem.org/Team:Beijing_BHSF/Project">Project</a></li>
 +
                <li><a href="https://2013hs.igem.org/Team:Beijing_BHSF/Team">Team</a></li>
 +
                <li class="selected"><a href="https://2013hs.igem.org/Team:Beijing_BHSF/Photo">Photos</a></li>
 +
                <li><a href="https://2013hs.igem.org/Team:Beijing_BHSF/Gratefulheart">Grateful Heart</a></li>
 +
            </ul>
 +
        </div>
 +
       
 +
        </div>
 +
  </div><!-- End of Header-->
-
<div id="bankImages">
+
<div id="wrap">
-
<img alt="" src="">
+
-
<img alt="" src="https://static.igem.org/mediawiki/2013hs/e/e9/BFSH_LOGO.jpg">
+
-
<img alt="" src="images/wt47.jpg">
+
-
<img alt="" src="images/wt16.jpg">
+
-
 
+
-
<img alt="" src="images/wt43.jpg">
+
-
<img alt="" src="images/wt19.jpg">
+
-
<img alt="" src="images/wt27.jpg">
+
-
<img alt="" src="images/wt46.jpg">
+
-
 
+
-
<img alt="" src="images/wt14.jpg">
+
-
<img alt="" src="images/wt21.jpg">
+
-
<img alt="" src="images/wt35.jpg">
+
-
<img alt="" src="images/wt48.jpg">
+
-
 
+
-
<img alt="" src="images/wt55.jpg">
+
-
<img alt="" src="images/wt40.jpg">
+
-
<img alt="" src="images/wt53.jpg">
+
-
<img alt="" src="images/wt25.jpg">
+
 +
  <div class="slider">
 +
<div class="flexslider">
 +
    <ul class="slides">
 +
    <li><img src="https://static.igem.org/mediawiki/2013hs/c/c5/BHSF_PHOTO1.JPG" alt="" title="" border="0"/></a>
 +
           
 +
            </li>
 +
            <li><img src="https://static.igem.org/mediawiki/2013hs/8/80/BHSF_PHOTO2.JPG" alt="" title="" border="0"/></a>
 +
            </li>
 +
            <li><img src="https://static.igem.org/mediawiki/2013hs/5/56/BHSF_PHOTO3.JPG" alt="" title="" border="0"/></a>
 +
        </li>
 +
        <li><img src="https://static.igem.org/mediawiki/2013hs/f/fb/BHSF_PHOTO4.JPG" alt="" title="" border="0"/></a>
 +
            </li>
 +
            <li><img src="https://static.igem.org/mediawiki/2013hs/1/14/BHSF_PHOTO5.JPG" alt="" title="" border="0"/></a>
 +
            </li>
 +
            <li><img src="https://static.igem.org/mediawiki/2013hs/a/aa/BHSF_PHOTO6.JPG" alt="" title="" border="0"/></a>
 +
            </li>
 +
            <li><img src="https://static.igem.org/mediawiki/2013hs/d/d5/BHSF_PHOTO7.JPG" alt="" title="" border="0"/></a>
 +
            </li>
 +
            <li><img src="https://static.igem.org/mediawiki/2013hs/4/40/BHSF_PHOTO8.JPG" alt="" title="" border="0"/></a>
 +
            </li>
 +
        <li><img src="https://static.igem.org/mediawiki/2013hs/0/0e/BHSF_PHOTO9.JPG" alt="" title="" border="0"/></a>
 +
            </li>
 +
            <li><img src="https://static.igem.org/mediawiki/2013hs/d/d9/BHSF_PHOTO10.JPG" alt="" title="" border="0"/></a>
 +
            </li>
 +
            <li><img src="https://static.igem.org/mediawiki/2013hs/2/2b/BHSF_PHOTO11.JPG" alt="" title="" border="0"/></a>
 +
            </li>
 +
            <li><img src="https://static.igem.org/mediawiki/2013hs/d/d7/BHSF_PHOTO12.JPG" alt="" title="" border="0"/></a>
 +
            </li>
 +
            <li><img src="https://static.igem.org/mediawiki/2013hs/8/87/BHSF_PHOTO13.jpg" alt="" title="" border="0"/></a>
 +
            </li>
 +
          </ul>
 +
  </div>
 +
  </div>
 +
 
 +
  <div class="clear"></div>
 +
 
 +
 
</div>
</div>
-
<script type="text/javascript">
+
        <div class="footer">
-
/* ==== start script ==== */
+
        <div class="footer_content">
-
onresize = tv.resize;
+
           
-
tv.init();
+
                <ul class="footer_menu">
 +
                <li><a href="https://2013hs.igem.org/Team:Beijing_BHSF">Home</a></li>
 +
                <li><a href="https://2013hs.igem.org/Team:Beijing_BHSF/Project">Project</a></li>
 +
                <li><a href="https://2013hs.igem.org/Team:Beijing_BHSF/Team">Team</a></li>
 +
                <li><a href="https://2013hs.igem.org/Team:Beijing_BHSF/Photo">Photos</a></li>
 +
                <li><a href="https://2013hs.igem.org/Team:Beijing_BHSF/Gratefulheart">Grateful Heart</a></li>
 +
                </ul>
 +
            </div>
 +
           
 +
            <div class="footer_right">
 +
                <ul class="social_icons">
 +
                <li><a href="http://www.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/igem.org/d/d6/BHSF_IGEMLOGO.png" alt="" title="" /></a></li>
 +
                <li><a href="http://www.bhsf.cn/index.php?id=103"><img src="https://static.igem.org/mediawiki/igem.org/c/cd/BHSF_xiaobiao.png" alt="" title="" /></a></li>
 +
                <li><a href="http://www.tsinghua.edu.cn/publish/then/index.html"><img src="https://static.igem.org/mediawiki/igem.org/f/f4/BHSF_QINGHUA.jpg" alt="" title="" /></a></li>
 +
                </ul>
 +
            </div>
 +
          <div class="clear"></div>
 +
          </div>
 +
        </div>
 +
<script type="text/javascript" charset="utf-8">
 +
var $ = jQuery.noConflict();
 +
  $(window).load(function() {
 +
    $('.flexslider').flexslider({
 +
          animation: "slide"
 +
    });
 +
  });
</script>
</script>
-
<br>
 
</body>
</body>
 +
</html>
</html>

Latest revision as of 18:57, 21 June 2013

Retrieved from "http://2013hs.igem.org/Team:Beijing_BHSF/Photo"