Team:BNU-China/profile.html

From 2014.igem.org

(Difference between revisions)
Line 4: Line 4:
{{Team:BNU-China/head}}  
{{Team:BNU-China/head}}  
<html>
<html>
-
<body>
+
  <script type="text/javascript">
-
<!--把下面代码加到<body>与</body>之间-->
+
$(document).ready(function() {
-
<SCRIPT LANGUAGE="JavaScript">
+
-
<!-- Begin
+
      var  
-
var ns = (document.layers)?1:0;
+
        speed = 1000,   // animation speed
-
  var imgwidth=40;
+
        $wall = $('#portfolio .items'),
-
  var imgheight=40;
+
-
  var button = Array();
+
-
  button[0]=new Image();
+
-
  button[0].src="https://static.igem.org/mediawiki/2014/0/0d/Bnu_IGEMsmall.png";
+
-
  button[1]=new Image();
+
-
  button[1].src="https://static.igem.org/mediawiki/2014/0/0d/Bnu_IGEMsmall.png";
+
-
var text="<table width=10 bgcolor=#ffffff><td><a href='javascript:showhideAnimation()'><center><img name='Button' src='"+button[0].src+"' width='"+imgwidth+"' height='"+imgheight+"' border='0'></center></a></font></td></table>"
+
-
if (ns) {
+
-
  document.write("<LAYER NAME='FlyOnOff' LEFT=0 TOP=0>"+text+"</LAYER>");
+
-
  horz=".left";
+
-
  vert=".top";
+
-
  docStyle="document.";
+
-
  styleDoc="";
+
-
  innerW="window.innerWidth";
+
-
  innerH="window.innerHeight";
+
-
  offsetX="window.pageXOffset";
+
-
  offsetY="window.pageYOffset";
+
-
  }else {
+
-
  document.write("<div id='FlyOnOff' style='position:absolute; visibility:show; left:235px; top:-50px; z-index:2'>"+text+"</div>");
+
-
  horz=".pixelLeft";
+
-
  vert=".pixelTop";
+
-
  docStyle="";
+
-
  styleDoc=".style";
+
-
  innerW="document.body.clientWidth";
+
-
  innerH="document.body.clientHeight";
+
-
  offsetX="document.body.scrollLeft";
+
-
  offsetY="document.body.scrollTop";
+
-
  }
+
-
function checkLocation() {
+
-
  objectXY="FlyOnOff";
+
-
  var availableX=eval(innerW);
+
-
  var availableY=eval(innerH);
+
-
   var currentX=eval(offsetX);
+
-
  var currentY=eval(offsetY);
+
-
  x=availableX-(imgwidth+30)+currentX;
+
-
  y=availableY-(imgheight+20)+currentY;
+
-
  eval(docStyle + objectXY + styleDoc + horz + "=" + x);
+
-
  eval(docStyle + objectXY + styleDoc + vert + "=" + y);
+
-
  }
+
-
setInterval('checkLocation()', 10);
+
-
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
+
-
  (document.layers)?window.onMouseMove=getMousePosition:document.onmousemove=getMousePosition;
+
-
var Dot_Ro=60;
+
        masonryOptions = {        // initial masonry options
-
  var Dot_Theta=0;
+
 
-
  var Dot_Speed;
+
          itemSelector: '.box:not(.invis)',
-
  var Dot_Direction=1;
+
          animate: true,
-
  var Dot_x=0;
+
          animationOptions: {
-
  var Dot_y=0;
+
            duration: speed,
-
var alpha;
+
            queue: false
-
  var mult;
+
          }
-
  var picX = 20;
+
        };
-
  var picY = 100;
+
-
  var mouseX = 0;
+
$wall.imagesLoaded(function(){
-
  var mouseY = 0;
+
-
  var step = 10;
+
$wall.masonry(masonryOptions);
-
  var speed = 100;
+
-
var dir = Array();
+
// Create array of filters from link href
-
  dir[-4]="https://static.igem.org/mediawiki/2014/0/0d/Bnu_IGEMsmall.png";
+
var arrFilter = [];
-
  dir[-1]="https://static.igem.org/mediawiki/2014/0/0d/Bnu_IGEMsmall.png";
+
$('#filtering-nav a').each(function(){
-
  dir[-2]="https://static.igem.org/mediawiki/2014/0/0d/Bnu_IGEMsmall.png";
+
fhash = $(this).attr('href').replace('#','');
-
  dir[-3]="https://static.igem.org/mediawiki/2014/0/0d/Bnu_IGEMsmall.png";
+
if(fhash != 'all'){
-
  dir[3]="https://static.igem.org/mediawiki/2014/0/0d/Bnu_IGEMsmall.png";
+
arrFilter.push(fhash);
-
  dir[4]="https://static.igem.org/mediawiki/2014/0/0d/Bnu_IGEMsmall.png";
+
}
-
  dir[1]="https://static.igem.org/mediawiki/2014/0/0d/Bnu_IGEMsmall.png";
+
});
-
  dir[2]="https://static.igem.org/mediawiki/2014/0/0d/Bnu_IGEMsmall.png";
+
-
  dir[0]="https://static.igem.org/mediawiki/2014/0/0d/Bnu_IGEMsmall.png";
+
// Get the parameter value after the # symbol
-
var img = Array();
+
var url=document.URL.split('#')[1];
-
  for (var i=-4; i<5; i++){
+
if(url == undefined){
-
  img[i]=new Image();
+
url = 'all';
-
  img[i].src=""+dir[i];
+
}
-
  }
+
$('#filtering-nav a.'+url).parent().addClass('active');
-
if (ns) {
+
-
  document.write("<LAYER NAME='FlyDiv' LEFT=0 TOP=0><img src="+img[1].src+" name='pic'></LAYER>");
+
if(jQuery.inArray(url, arrFilter) > '-1'){
-
  }else {
+
// set masonry options animate to false
-
  document.write("<div id='FlyDiv' style='position:absolute'>");
+
masonryOptions.animate = false;
-
  document.write("<img name='pic' src=" + img[1].src + "></div>");
+
// hide boxes that don't match the filter class
-
  }
+
$wall.children().not('.'+url).toggleClass('invis').hide();
-
function display(direction) {
+
}
-
  if (ns) {
+
// imageSetCss($(".box"));
-
  document.pic.src = img[direction].src;
+
// run masonry again
-
  }else{
+
$wall.masonry(masonryOptions);
-
  pic.src = img[direction].src;
+
// imageFadeIn($(".box"));
-
  }
+
$wall.animate({opacity: 1},1000);
-
  }
+
-
function getMousePosition(e) {
+
});
-
  mouseY=(ns)?e.pageY:window.event.y + document.body.scrollTop;
+
-
  mouseX=(ns)?e.pageX:window.event.x + document.body.scrollLeft;
+
$('#filtering-nav a').click(function(e){
-
  }
+
var color = $(this).attr('class');
-
function calcNewPos() {
+
filterClass = '.' + color;
-
  var dist=Math.sqrt(Math.pow(mouseY-picY,2) + Math.pow(mouseX-picX,2));
+
$('#filtering-nav li').removeClass('active');
-
  Dot_Speed=Math.PI/15;
+
$(this).parent().addClass('active');
-
  Dot_Theta+=Dot_Direction*Dot_Speed;
+
-
  Dot_x=mouseX+Dot_Ro*Math.cos(Dot_Theta);
+
if(filterClass=='.all') {
-
  Dot_y=mouseY+Dot_Ro*Math.sin(Dot_Theta);
+
  // show all hidden boxes
-
  var arg = (Dot_y-picY) / (Dot_x-picX);
+
  $wall.children('.invis').toggleClass('invis').fadeIn(speed);
-
  mult = (Dot_x - picX < 0)? mult = -1:1;
+
} else {
-
  alpha = Math.atan(arg);
+
  // hide visible boxes
-
  var dx = mult * step * Math.cos(alpha);
+
  $wall.children().not(filterClass).not('.invis').toggleClass('invis').fadeOut(speed);
-
  var dy = mult * step * Math.sin(alpha);
+
  // show hidden boxes
-
  picX += dx;
+
  $wall.children(filterClass+'.invis').toggleClass('invis').fadeIn(speed);
-
   picY += dy;
+
}
-
  }
+
$wall.masonry({animate: true});
-
function showhideAnimation() {
+
// set hash in URL
-
  if (ns) {
+
location.hash = color;
-
  document.layers['FlyDiv'].visibility=document.layers['FlyDiv'].visibility=="hide"?"show":"hide";
+
e.preventDefault();
-
  document.Button.src = document.layers['FlyDiv'].visibility=="hide"?button[1].src:button[0].src;
+
});
-
  }else {
+
});
-
  FlyDiv.style.visibility=="hidden"?FlyDiv.style.visibility = "visible":FlyDiv.style.visibility = "hidden";
+
$.fn.imagesLoaded = function(a) {
-
  Button.src = FlyDiv.style.visibility=="hidden"?button[1].src:button[0].src;
+
var
-
  }
+
b=this.find("img"),
-
  }
+
c=[],
-
function gs9768() {
+
d=this,
-
  calcNewPos();
+
e=b.length;
-
  if (ns) {
+
-
  document.layers['FlyDiv'].left = picX;
+
if(!b.length){
-
  document.layers['FlyDiv'].top = picY;
+
a.call(this);
-
  }else{
+
return this
-
  FlyDiv.style.left = picX - pic.width / 2;
+
}
-
  FlyDiv.style.top = picY - pic.height / 2;
+
b.one("load error",function(){
-
  }
+
--e===0&&(e=b.length,b.one("load error",function(){
-
alpha=-180*alpha/Math.PI;
+
--e===0&&a.call(d)}).each(function(){
-
  alpha+=22.5;
+
this.src=c.shift()
-
  var OK=0;
+
})
-
  for(var i=0; (i<4)&& !OK; i++){
+
)}
-
  if (alpha<-Math.PI+45*i){
+
).each(function(){
-
  display(mult*(i+1));
+
c.push(this.src),this.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="
-
  OK=1;
+
});
-
  }
+
return this
-
  }
+
};
-
  }
+
   </script>
-
function ChangeDotDirection() {
+
      <h2>Our Team Profile</h2>
-
  Dot_Direction=-Dot_Direction;
+
    <p>This is a team full of creative and happiness.</p>
-
  Dot_Theta+=Math.PI;
+
   
-
  }
+
    <!-- Begin Portfolio -->
-
setInterval('gs9768()', speed);
+
      <div id="portfolio">
-
  setInterval('ChangeDotDirection()', speed*50);
+
        <ul id="filtering-nav">
-
// End -->
+
          <li>Filter:</li>
-
</SCRIPT>
+
          <li><a class="all" href="#all">All</a></li>
-
</body>
+
          <li><a class="cat1" href="#cat1">Students</a></li>
 +
          <li><a class="cat2" href="#cat2">Advisors</a></li>
 +
          <li><a class="cat3" href="#cat3">Instructors</a></li>
 +
        </ul>
 +
        <div class="clear"></div>
 +
        <div class="items">
 +
          <div class="box col4 cat1"><img class="teamprofile1" src="style/images/art/p1.jpg" alt=""><b>Wang Xuan</b><br/>Captain</div>
 +
          <div class="box col4 cat1"><img class="teamprofile2" src="style/images/art/p2.jpg" alt="" /><b>Liu Bing</b><br/>Wiki Design</div>
 +
          <div class="box col4 cat1"><img class="teamprofile3" src="style/images/art/p3.jpg" alt="" /><b>Feng Jing</b><br/>Lab work </div>
 +
          <div class="box col4 cat1"><img class="teamprofile4" src="style/images/art/p4.jpg" alt="" /><b>Wu Hanqin</b><br/>Art</div>
 +
          <div class="box col4 cat1"><img class="teamprofile5" src="style/images/art/p5.jpg" alt="" /><b>Huang Li</b><br/>public outreach</div>
 +
          <div class="box col4 cat1"><img class="teamprofile6" src="style/images/art/p6.jpg" alt="" /><b>Hou Yuelong</b><br/>Safety design</div>
 +
          <div class="box col4 cat1"><img class="teamprofile7" src="style/images/art/p7.jpg" alt="" /><b>Li Siyao</b><br/>Modelling</div>
 +
          <div class="box col4 cat1"><img class="teamprofile8" src="style/images/art/p8.jpg" alt="" /><b>Zhang Shu</b><br/>Deliever system design</div>
 +
          <div class="box col4 cat1"><img class="teamprofile9" src="style/images/art/p9.jpg" alt="" /><b>Huang Shengnan</b><br/>...</div>
 +
          <div class="box col4 cat2"><img class="teamprofile10" src="style/images/art/p10.jpg" alt="" /><b>Ren Qidong</b></div>
 +
          <div class="box col4 cat2"><img class="teamprofile11" src="style/images/art/p11.jpg" alt="" /><b>Huo Liang</b></div>
 +
          <div class="box col4 cat3"><img class="teamprofile12" src="style/images/art/p12.jpg" alt="" /><b>Dr: Xiang Benqiong</b></div>
 +
  <div class="box col4 cat3"><img class="teamprofile13" src="style/images/art/p13.jpg" alt="" /><b>Dr: Zhu Xudong</b></div>
 +
  <div class="box col4 cat3"><img class="teamprofile14" src="style/images/art/p14.jpg" alt="" /><b>Dr: Yang Dong</b></div>
 +
        </div>
 +
        <!-- .wrap -->  
 +
    </div>
 +
    <!-- End Portfolio -->
</html>
</html>
{{Team:BNU-China/foot}}
{{Team:BNU-China/foot}}

Revision as of 09:40, 31 July 2014

1 2

Our Team Profile

This is a team full of creative and happiness.

Wang Xuan
Captain
Liu Bing
Wiki Design
Feng Jing
Lab work
Wu Hanqin
Art
Huang Li
public outreach
Hou Yuelong
Safety design
Li Siyao
Modelling
Zhang Shu
Deliever system design
Huang Shengnan
...
Ren Qidong
Huo Liang
Dr: Xiang Benqiong
Dr: Zhu Xudong
Dr: Yang Dong

Retrieved from "http://2014.igem.org/Team:BNU-China/profile.html"