Team:HZAU-China/Gallery

From 2013.igem.org

(Difference between revisions)
 
(37 intermediate revisions not shown)
Line 2: Line 2:
<html>
<html>
-
<script>
+
<style>
-
window.onload=function(){
+
#info{ width:700px; background: transpant; margin-left:auto; margin-right:auto;border:7px solid #000; text-align:center; height:397px;}
-
var rt=new imgRound("imgContainer",120,90,300,80,230,0.01);
+
ul,li{ list-style:none; margin:0; padding:0;}
-
setInterval(function(){rt.roundMove()},20)
+
a:active,a:hover{ cursor:pointer}
-
}
+
#info #zs img{ width:560px; height:390px; border:7px solid #FFF;}
-
function imgRound(id,w,h,x,y,r,dv,rh,ah){
+
#zs{ height:390px; overflow: hidden; text-align:left; float:left; width:560px;}
-
if (ah==undefined) ah=1;
+
#zs ul{ margin:0 0 0 0px;}
-
if (rh==undefined) rh=10;
+
#zs span{ display:block}
-
var dv=dv*ah; //旋转速度
+
#zs a{ display:inline}
-
var pi=3.1415926575;
+
#nav{ padding-right:10px;width:140px; height:390px; overflow:auto; padding:0; text-align:left; float:left;}
-
var d=pi/2;
+
#nav a{ display:block}
-
var pd=Math.asin(w/2/r);
+
.z{ width:120px; height:79px;display:block; border:1px solid #FFFFFF; margin:0;color:#FFF}
-
var smove=true;
+
.b2{ background:url(https://static.igem.org/mediawiki/2013/6/6f/IMG_20130705_08370311.jpg)}
-
var imgArr=new Array();
+
.b3{ background:url(https://static.igem.org/mediawiki/2013/6/6e/IMG_147311.JPG)}
-
var objectId=id;
+
.b4{ background:url(https://static.igem.org/mediawiki/2013/1/17/IMG_147111.JPG)}
-
var o=document.getElementById(objectId);
+
.b5{ background:url(https://static.igem.org/mediawiki/2013/2/25/IMG_144411.JPG)}
-
o.style.position="relative";
+
.b6{ background:url(https://static.igem.org/mediawiki/2013/2/2b/IMG_144311.JPG)}
-
var arrimg=o.getElementsByTagName("img");
+
.b7{ background:url(https://static.igem.org/mediawiki/2013/1/11/DSC_372511.JPG)}
-
var pn=arrimg.length; //图片数量
+
.b8{ background:url(https://static.igem.org/mediawiki/2013/8/83/DSC_372011.JPG)}
-
var ed=pi*2/pn;
+
.b9{ background:url(https://static.igem.org/mediawiki/2013/7/7b/DSC_368711.JPG)}
-
for (n=0;n<arrimg.length;n++){
+
.b10{ background:url(https://static.igem.org/mediawiki/2013/0/03/DSC_331811.JPG)}
-
var lk=arrimg[n].getAttribute("link");
+
.b11{ background:url(https://static.igem.org/mediawiki/2013/1/10/DSC_329111.JPG)}
-
if (lk!=null) arrimg[n].setAttribute("title",lk)
+
.b12{ background:url(https://static.igem.org/mediawiki/2013/3/37/DSC_320411.JPG)}
-
arrimg[n].onclick=function(){
+
.b13{ background:url(https://static.igem.org/mediawiki/2013/e/e7/DSC_320011.JPG)}
-
if (this.getAttribute("link")!=null){
+
.b14{ background:url(https://static.igem.org/mediawiki/2013/7/70/DSC_210111.JPG)}
-
if (this.getAttribute("target")!="_blank") window.location=(this.getAttribute("link"))
+
.b15{ background:url(https://static.igem.org/mediawiki/2013/f/f8/DSC_198711.JPG)}
-
else window.open(this.getAttribute("link"))
+
.b1{ background:url(https://static.igem.org/mediawiki/2013/2/26/DSC_198511.JPG)}
-
}
+
#zs li{ display:block; height:434px;}
-
}
+
</style>
-
arrimg[n].onmouseout=function(){smove=true;}
+
-
arrimg[n].onmouseover=function(){smove=false;}
+
-
arrimg[n].style.position="absolute";
+
-
imgArr.push(arrimg[n]);
+
-
}
+
-
+
-
this.roundMove=function(){
+
-
for (n=0;n<=pn-1;n++){
+
-
var o=imgArr[n];
+
-
var ta=Math.sin(d+ed*n),strFilter;
+
-
if (ta<0) o.style.left=Math.cos(d+ed*n-pd)*r+x+"px";
+
-
else o.style.left=Math.cos(d+ed*n+pd)*r+x+"px";
+
-
o.style.top=ta*rh+rh+y+"px";
+
-
var zoom=Math.abs(Math.sin((d+ed*n)/2+pi/4))*0.5+0.5;
+
-
o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*zoom*r+"px";
+
-
o.style.height=zoom*h+"px";
+
-
if (ta<0) {ta=(ta+1)*80+20;o.style.zIndex=0;}
+
-
else {ta=100;o.style.zIndex=1}
+
-
if (o.style.zIndex<=0) strFilter="FlipH(enabled:true)"
+
-
else strFilter="FlipH(enabled:false)";
+
-
strFilter=strFilter+" alpha(opacity="+ta+")";
+
-
o.style.opacity=ta/100;
+
-
o.style.filter=strFilter;
+
-
}
+
-
if (smove) d=d+dv;
+
-
}
+
-
}
+
-
</script>
+
<style>
<style>
Line 83: Line 55:
     padding-top: 10px;
     padding-top: 10px;
     padding-right:15px;
     padding-right:15px;
 +
    padding-bottom:20px;
     width: 710px;
     width: 710px;
}
}
Line 129: Line 102:
ul.menu input.close:checked ~ ul li {margin-top:-30px;}
ul.menu input.close:checked ~ ul li {margin-top:-30px;}
</style>
</style>
-
 
-
 
-
<script>
 
-
$(document).ready(function(){
 
-
var topMain=$("#sidebar").height()+100//是头部的高度加头部与nav导航之间的距离
 
-
var menu=$(".menu");
 
-
$(window).scroll(function(){
 
-
if ($(window).scrollTop()>topMain){//如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll，否则就移除
 
-
menu.addClass("menu_scroll");
 
-
}else{
 
-
menu.removeClass("menu_scroll");
 
-
}
 
-
});
 
-
})
 
-
</script>
 
<body>
<body>
Line 159: Line 117:
     <center><span style="font-size:46px;font-family:Cambria;margin-top:10px;line-height:80%">Gallery</span></center>
     <center><span style="font-size:46px;font-family:Cambria;margin-top:10px;line-height:80%">Gallery</span></center>
     <p><br></p>
     <p><br></p>
-
   
 
-
<div id="imgContainer" style="width:600px;height:300px;border:1px solid red">
 
-
 
-
<img width="300" src="https://static.igem.org/mediawiki/2013/8/8f/DSC_1987.JPG"/>
 
-
<img width="300" src="https://static.igem.org/mediawiki/2013/e/e1/IMG_1443.JPG"/>
 
-
<img width="300" src="https://static.igem.org/mediawiki/2013/a/a8/IMG_1450.JPG"/>
 
-
<img width="300" src="https://static.igem.org/mediawiki/2013/a/a3/IMG_20130705_"/>
 
-
<img width="300" src="https://static.igem.org/mediawiki/2013/8/8f/DSC_1987.JPG"/>
 
-
<img width="300" src="https://static.igem.org/mediawiki/2013/e/e1/IMG_1443.JPG"/>
 
-
<img width="300" src="https://static.igem.org/mediawiki/2013/a/a8/IMG_1450.JPG"/>
 
-
<img width="300" src="https://static.igem.org/mediawiki/2013/a/a3/IMG_20130705_"/>
 
-
<img width="300" src="https://static.igem.org/mediawiki/2013/a/a3/IMG_20130705_"/>
 
-
<img width="300" src="https://static.igem.org/mediawiki/2013/a/a3/IMG_20130705_"/>
 
 +
<div id="info">
 +
  <div id="zs">
 +
    <ul>
 +
      <li><a name="z1" id="z1"></a><img src="https://static.igem.org/mediawiki/2013/e/ec/DSC_1985.JPG" /><br />
 +
      <li><a name="z2" id="z2"></a><img src="https://static.igem.org/mediawiki/2013/a/a3/IMG_20130705_083703.jpg"  /><br />     
 +
      <li><a name="z3" id="z3"></a><img src="https://static.igem.org/mediawiki/2013/4/41/IMG_1473.JPG"  /><br />     
 +
      <li><a name="z4" id="z4"></a><img src="https://static.igem.org/mediawiki/2013/5/57/IMG_1471.JPG"  /><br />       
 +
      <li><a name="z5" id="z5"></a><img src="https://static.igem.org/mediawiki/2013/a/af/IMG_1444.JPG"  /><br />     
 +
      <li><a name="z6" id="z6"></a><img src="https://static.igem.org/mediawiki/2013/e/e1/IMG_1443.JPG"  /><br />
 +
      <li><a name="z7" id="z7"></a><img src="https://static.igem.org/mediawiki/2013/5/5a/DSC_3725.JPG"  /><br />     
 +
      <li><a name="z8" id="z8"></a><img src="https://static.igem.org/mediawiki/2013/f/fc/DSC_3720.JPG"  /><br />
 +
      <li><a name="z3" id="z9"></a><img src="https://static.igem.org/mediawiki/2013/c/c5/DSC_3687.JPG"  /><br />     
 +
      <li><a name="z4" id="z10"></a><img src="https://static.igem.org/mediawiki/2013/3/39/DSC_3318.JPG"  /><br />       
 +
      <li><a name="z5" id="z11"></a><img src="https://static.igem.org/mediawiki/2013/9/9f/DSC_3291.JPG"  /><br />     
 +
      <li><a name="z6" id="z12"></a><img src="https://static.igem.org/mediawiki/2013/f/f0/DSC_3204.JPG"  /><br />
 +
      <li><a name="z7" id="z13"></a><img src="https://static.igem.org/mediawiki/2013/f/f4/DSC_3200.JPG"  /><br />     
 +
      <li><a name="z8" id="z14"></a><img src="https://static.igem.org/mediawiki/2013/d/dd/DSC_2101.JPG"  /><br />
 +
      <li><a name="z3" id="z15"></a><img src="https://static.igem.org/mediawiki/2013/8/8f/DSC_1987.JPG"  /><br />     
 +
    </ul>
 +
  </div>
 +
 
 +
<div id="nav">
 +
  <a href="#z1" class="b1 z" title="照片1"></a>
 +
  <a href="#z2" class="b2 z" title="照片2"></a>
 +
  <a href="#z3" class="b3 z" title="照片3"></a>
 +
  <a href="#z4" class="b4 z" title="照片4"></a>
 +
  <a href="#z5" class="b5 z" title="照片5"></a>
 +
  <a href="#z6" class="b6 z" title="照片6"></a>
 +
  <a href="#z7" class="b7 z" title="照片1"></a>
 +
  <a href="#z8" class="b8 z" title="照片2"></a>
 +
          <a href="#z9" class="b9 z" title="照片2"></a>
 +
  <a href="#z10" class="b10 z" title="照片3"></a>
 +
  <a href="#z11" class="b11 z" title="照片4"></a>
 +
  <a href="#z12" class="b12 z" title="照片5"></a>
 +
  <a href="#z13" class="b13 z" title="照片6"></a>
 +
  <a href="#z14" class="b14 z" title="照片1"></a>
 +
  <a href="#z15" class="b15 z" title="照片2"></a>
 +
</div>
</div>
</div>
 +
     </div>
     </div>
</div>
</div>

Latest revision as of 17:39, 27 September 2013


Retrieved from "http://2013.igem.org/Team:HZAU-China/Gallery"