Team:HZAU-China/Gallery

From 2013.igem.org

(Difference between revisions)
 
(45 intermediate revisions not shown)
Line 1: Line 1:
{{:Team：HZAU-China/background-head}}
{{:Team：HZAU-China/background-head}}
<html>
<html>
-
<script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script>
+
 
-
<style type="text/css">
+
<style>
-
#tip  {position:absolute;color:#333;display:none;}
+
#info{ width:700px; background: transpant; margin-left:auto; margin-right:auto;border:7px solid #000; text-align:center; height:397px;}
-
#tip s  {position:absolute;top:40px;left:-20px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:transparent #BBA transparent transparent;border-style:dashed solid dashed dashed;border-width:10px;}
+
ul,li{ list-style:none; margin:0; padding:0;}
-
#tip s i  {position:absolute;top:-10px;left:-8px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:transparent #fff transparent transparent;border-style:dashed solid dashed dashed;border-width:10px;}
+
a:active,a:hover{ cursor:pointer}
-
#tip .t_box  {position:relative;background-color:#CCC;filter:alpha(opacity=50);-moz-opacity:0.5;bottom:-3px;right:-3px;}
+
#info #zs img{ width:560px; height:390px; border:7px solid #FFF;}
-
#tip .t_box div  {position:relative;background-color:#FFF;border:1px solid #ACA899;background:#FFF;padding:1px;top:-3px;left:-3px;}
+
#zs{ height:390px; overflow: hidden; text-align:left; float:left; width:560px;}
-
+
#zs ul{ margin:0 0 0 0px;}
-
.tip  {width:82px;height:82px;}
+
#zs span{ display:block}
 +
#zs a{ display:inline}
 +
#nav{ padding-right:10px;width:140px; height:390px; overflow:auto; padding:0; text-align:left; float:left;}
 +
#nav a{ display:block}
 +
.z{ width:120px; height:79px;display:block; border:1px solid #FFFFFF; margin:0;color:#FFF}
 +
.b2{ background:url(https://static.igem.org/mediawiki/2013/6/6f/IMG_20130705_08370311.jpg)}
 +
.b3{ background:url(https://static.igem.org/mediawiki/2013/6/6e/IMG_147311.JPG)}
 +
.b4{ background:url(https://static.igem.org/mediawiki/2013/1/17/IMG_147111.JPG)}
 +
.b5{ background:url(https://static.igem.org/mediawiki/2013/2/25/IMG_144411.JPG)}
 +
.b6{ background:url(https://static.igem.org/mediawiki/2013/2/2b/IMG_144311.JPG)}
 +
.b7{ background:url(https://static.igem.org/mediawiki/2013/1/11/DSC_372511.JPG)}
 +
.b8{ background:url(https://static.igem.org/mediawiki/2013/8/83/DSC_372011.JPG)}
 +
.b9{ background:url(https://static.igem.org/mediawiki/2013/7/7b/DSC_368711.JPG)}
 +
.b10{ background:url(https://static.igem.org/mediawiki/2013/0/03/DSC_331811.JPG)}
 +
.b11{ background:url(https://static.igem.org/mediawiki/2013/1/10/DSC_329111.JPG)}
 +
.b12{ background:url(https://static.igem.org/mediawiki/2013/3/37/DSC_320411.JPG)}
 +
.b13{ background:url(https://static.igem.org/mediawiki/2013/e/e7/DSC_320011.JPG)}
 +
.b14{ background:url(https://static.igem.org/mediawiki/2013/7/70/DSC_210111.JPG)}
 +
.b15{ background:url(https://static.igem.org/mediawiki/2013/f/f8/DSC_198711.JPG)}
 +
.b1{ background:url(https://static.igem.org/mediawiki/2013/2/26/DSC_198511.JPG)}
 +
#zs li{ display:block; height:434px;}
</style>
</style>
-
<script type="text/javascript">
+
 
-
$(function(){
+
-
  $('.tip').mouseover(function(){
+
-
      var $tip=$('<div id="tip"><div class="t_box"><div><s><i></i></s><img src="'+this.src+'" /></div></div></div>');
+
-
      $('body').append($tip);
+
-
      $('#tip').show('fast');
+
-
  }).mouseout(function(){
+
-
      $('#tip').remove();
+
-
  }).mousemove(function(e){
+
-
      $('#tip').css({"top":(e.pageY-60)+"px","left":(e.pageX+30)+"px"})
+
-
  })
+
-
})
+
-
</script>
+
<style>
<style>
#background{
#background{
Line 47: Line 55:
     padding-top: 10px;
     padding-top: 10px;
     padding-right:15px;
     padding-right:15px;
 +
    padding-bottom:20px;
     width: 710px;
     width: 710px;
}
}
Line 56: Line 65:
ul.menu:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
ul.menu:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
ul.menu,
ul.menu,
-
ul.menu ul {padding:0;margin:0;list-style:none;position:;width:220px;background:#ddd;font-family:arial, sans-serif;}
+
ul.menu ul {padding:0;margin:0;list-style:none;position:;width:220px;background:#d3f18c;font-family:arial, sans-serif;}
ul.menu {z-index:100;padding:10px;margin:0 auto;}
ul.menu {z-index:100;padding:10px;margin:0 auto;}
ul.menu ul {z-index:50;
ul.menu ul {z-index:50;
Line 68: Line 77:
ul.menu > li {margin-top:2px;font-size:12px;}
ul.menu > li {margin-top:2px;font-size:12px;}
ul.menu > li a {font:normal 16px/29px arial, sans-serif;color:#fff;text-decoration:none;}
ul.menu > li a {font:normal 16px/29px arial, sans-serif;color:#fff;text-decoration:none;}
-
ul.menu label.open {display:block;background:#c00 no-repeat 170px 12px;line-height:30px;position:relative;z-
+
ul.menu label.open {display:block;background:#517b1f no-repeat 170px 12px;line-height:30px;position:relative;z-
-
 
+
index:100;font:normal 12px/30px arial, sans-serif;color:#fff;border-radius:10px 10px 0 0;}
index:100;font:normal 12px/30px arial, sans-serif;color:#fff;border-radius:10px 10px 0 0;}
-
ul.menu label.open b {color:#ff0;}
+
ul.menu span {display:block;background:#517b1f;line-height:30px;position:relative;z-index:100;font-size: 16px;padding-left:10px;}
-
ul.menu span {display:block;background:#c00;line-height:30px;position:relative;z-index:100;font-size: 16px;padding-left:10px;}
+
ul.menu label img {position:absolute;left:0;top:0;width:100%;height:30px;}
ul.menu label img {position:absolute;left:0;top:0;width:100%;height:30px;}
ul.menu ul li {margin-top:-30px;
ul.menu ul li {margin-top:-30px;
Line 81: Line 88:
transition: 0.5s;
transition: 0.5s;
}
}
-
ul.menu ul li a {display:block;font:normal 16px/29px arial, sans-serif;color:#000;background:#ccc;}
+
ul.menu ul li a {display:block;font:normal 16px/29px arial, sans-serif;color:#000;background:#b3e24b;}
-
ul.menu ul li a:hover {background:#ddd;}
+
ul.menu ul li a:hover {background:#d3f18c;}
ul.menu input {position:absolute;left:-9999px;}
ul.menu input {position:absolute;left:-9999px;}
ul.menu li input:checked + label {background:#069;}
ul.menu li input:checked + label {background:#069;}
-
ul.menu li input:checked ~ ul {background:#ccc;padding-bottom:10px;}
+
ul.menu li input:checked ~ ul {background:#b3e24b;padding-bottom:10px;}
ul.menu li input:checked ~ ul li {margin-top:0;}
ul.menu li input:checked ~ ul li {margin-top:0;}
ul.menu label.close {display:block;width:200px;height:30px;background:transparent url("/jscss/demoimg/201208/u-arrow.gif")  
ul.menu label.close {display:block;width:200px;height:30px;background:transparent url("/jscss/demoimg/201208/u-arrow.gif")  
Line 95: 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 124: 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>
-
      
+
 
-
<p> </p>
+
<div id="info">
-
<a><img class="tip" src="https://static.igem.org/mediawiki/2013/7/7b/234.png" /></a>
+
  <div id="zs">
-
<a><img class="tip" src="https://static.igem.org/mediawiki/2013/7/7b/234.png" /></a>
+
     <ul>
-
<a><img class="tip" src="https://static.igem.org/mediawiki/2013/7/7b/234.png" /></a>
+
      <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>

Latest revision as of 17:39, 27 September 2013


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