Difference between revisions of "Team:ZJU-China"

Line 55: Line 55:
 
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:ZJU-China/css/home/ZJU-home-Intro.css?action=raw&ctype=text/css" />
 
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:ZJU-China/css/home/ZJU-home-Intro.css?action=raw&ctype=text/css" />
  
−
<style type="text/css">
 
−
.divcss5_list_title{background:#eeeeee; border:1px solid #cccccc; padding:1em;}
 
  
−
.divcss5_list_content{padding:1em;}
 
−
 
−
#tinybox{position:absolute; display:none; padding:10px; background:url(https://static.igem.org/mediawiki/2015/2/2a/ZJU-test-Preload.gif) no-repeat 50% 50%; z-index:2000;}
 
−
 
−
#tinymask{position:absolute; display:none; top:0; left:0; height:100%; width:100%; z-index:1500;}
 
−
 
−
#tinycontent{ font-size:1.1em;}
 
−
 
−
#n{margin:10px auto; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;}
 
−
 
−
#n a{ padding:0 4px; color:#333}
 
−
</style>
 
−
 
−
<script type="text/javascript" src="https://2015.igem.org/Team:ZJU-China/js/home/ZJU-tinybox.js?action=raw&amp;ctype=text/javascript"></script>
 
  
 
  <div class="wrap" >
 
  <div class="wrap" >
Line 77: Line 61:
  
  
−
+
    <h2 class="hh2">INTRODUCE</h2>
−
<h2 class="hh2">INTRODUCE</h2>
+
  
−
<div class="row">
+
    <div class="row">
−
 
+
      <div class="col-md-3">
−
 
+
<div class="block" data-rotate-y="180deg" data-move-z="-200px" data-move-x="-300px">
−
 
+
−
<div class="col-md-3">
+
−
<div class="block" data-rotate-y="180deg" data-move-z="-200px" data-move-x="-300px" id="block1-1" >
+
 
<img style="padding:20%" src="https://static.igem.org/mediawiki/2015/0/08/ZJU-promotion.png"/>
 
<img style="padding:20%" src="https://static.igem.org/mediawiki/2015/0/08/ZJU-promotion.png"/>
 
</div>
 
</div>
−
<script type="text/javascript">
 
−
var task = "<img width='554' height='344' src='https://static.igem.org/mediawiki/2015/f/fb/ZJU-test-Img.png' />";
 
−
T$('block1-1').onclick = function(){TINY.box.show(task,0,0,0,1)}
 
−
</script>
 
 
</div>
 
</div>
−
 
+
      <div class="col-md-3">
−
 
+
<div class="block" data-rotate-x="180deg" data-rotate-y="180deg" data-move-z="-700px">
−
<div class="col-md-3">
+
−
<div class="block" data-rotate-x="180deg" data-rotate-y="180deg" data-move-z="-700px" id="block1-2">
+
 
<img style="padding:20%" src="https://static.igem.org/mediawiki/2015/e/ee/ZJU-outreach.png"/>
 
<img style="padding:20%" src="https://static.igem.org/mediawiki/2015/e/ee/ZJU-outreach.png"/>
 
</div>
 
</div>
−
<script type="text/javascript">
 
−
var task = "<img width='554' height='344' src='https://static.igem.org/mediawiki/2015/f/fb/ZJU-test-Img.png' />";
 
−
T$('block1-2').onclick = function(){TINY.box.show(task,0,0,0,1)}
 
−
</script>
 
 
</div>
 
</div>
−
 
+
      <div class="col-md-3">
−
 
+
<div class="block" data-rotate-x="180deg" data-rotate-y="45deg" data-move-z="-500px">
−
 
+
−
<div class="col-md-3">
+
−
<div class="block" data-rotate-x="180deg" data-rotate-y="45deg" data-move-z="-500px" id="block1-3">
+
 
<img style="padding:20%" src="https://static.igem.org/mediawiki/2015/6/6f/ZJU-modling.png"/>
 
<img style="padding:20%" src="https://static.igem.org/mediawiki/2015/6/6f/ZJU-modling.png"/>
 
</div>
 
</div>
−
<script type="text/javascript">
 
−
var task = "<img width='554' height='344' src='https://static.igem.org/mediawiki/2015/f/fb/ZJU-test-Img.png' />";
 
−
T$('block1-3').onclick = function(){TINY.box.show(task,0,0,0,1)}
 
−
</script>
 
 
</div>
 
</div>
−
 
+
      <div class="col-md-3">
−
 
+
<div class="block" data-rotate-y="180deg" data-move-z="-100px" data-move-x="500px">
−
 
+
−
<div class="col-md-3">
+
−
<div class="block" data-rotate-y="180deg" data-move-z="-100px" data-move-x="500px" id="block1-4">
+
 
<img style="padding:20%" src="https://static.igem.org/mediawiki/2015/5/50/ZJU-application.png"/>
 
<img style="padding:20%" src="https://static.igem.org/mediawiki/2015/5/50/ZJU-application.png"/>
 
</div>
 
</div>
−
<script type="text/javascript">
 
−
var task = "<img width='554' height='344' src='https://static.igem.org/mediawiki/2015/f/fb/ZJU-test-Img.png' />";
 
−
T$('block1-4').onclick = function(){TINY.box.show(task,0,0,0,1)}
 
−
</script>
 
 
</div>
 
</div>
−
 
+
    </div>
−
 
+
    <div class="row">
−
 
+
      <div class="col-md-3"><div class="block" data-rotate-y="270deg" data-move-x="-150%">
−
</div>
+
−
 
+
−
 
+
−
 
+
−
<div class="row">
+
−
 
+
−
 
+
−
 
+
−
<div class="col-md-3">
+
−
<div class="block" data-rotate-y="270deg" data-move-x="-150%" id="block2-1">
+
 
<img style="padding:20%" src="https://static.igem.org/mediawiki/2015/0/04/ZJU-judge.png"/>
 
<img style="padding:20%" src="https://static.igem.org/mediawiki/2015/0/04/ZJU-judge.png"/>
−
</div>
+
</div></div>
−
<script type="text/javascript">
+
      <div class="col-md-3"><div class="block" data-rotate-y="270deg" data-move-x="150%">
−
var task = "<img width='554' height='344' src='https://static.igem.org/mediawiki/2015/f/fb/ZJU-test-Img.png' />";
+
<img style="padding:20%" src="https://static.igem.org/mediawiki/2015/d/d7/ZJU-FUTURE.png"/>
−
T$('block2-1').onclick = function(){TINY.box.show(task,0,0,0,1)}
+
</div></div>
−
</script>
+
      <div class="col-md-3"><div class="block" data-rotate-y="270deg" data-move-x="-150%">
 +
<img style="padding:20%" src="https://static.igem.org/mediawiki/2015/f/f3/ZJU-card.png"/>
 +
</div></div>
 +
      <div class="col-md-3"><div class="block" data-rotate-y="270deg" data-move-x="150%">
 +
<img style="padding:20%" src="https://static.igem.org/mediawiki/2015/4/43/ZJU-safty.png"/>
 +
</div></div>
 +
    </div>
 +
<div style=";text-align: center; width: 100%;height: 0;z-index: 99;"><a href="#globalWrapper"><img src="https://static.igem.org/mediawiki/2015/1/16/ZJU_up.png" style="width:10%;height:40px;" /></a></div>
 
</div>
 
</div>
  
  
−
<div class="col-md-3">
 
−
<div class="block" data-rotate-y="270deg" data-move-x="150%" id="block2-2">
 
−
<img style="padding:20%" src="https://static.igem.org/mediawiki/2015/d/d7/ZJU-FUTURE.png"/>
 
−
</div>
 
−
<script type="text/javascript">
 
−
var task = "<img width='554' height='344' src='https://static.igem.org/mediawiki/2015/f/fb/ZJU-test-Img.png' />";
 
−
T$('block2-2').onclick = function(){TINY.box.show(task,0,0,0,1)}
 
−
</script>
 
−
</div>
 
  
  
  
−
<div class="col-md-3">
+
  </div>
−
<div class="block" data-rotate-y="270deg" data-move-x="-150%" id="block2-3">
+
    <script type="text/javascript" src="https://2015.igem.org/Team:ZJU-China/js/home/ZJU-jquery.smoove.min.js?action=raw&amp;ctype=text/javascript"></script>  
−
<img style="padding:20%" src="https://static.igem.org/mediawiki/2015/f/f3/ZJU-card.png"/>
+
    <script>$('.block').smoove({offset:'40%'});</script>
−
</div>
+
−
<script type="text/javascript">
+
−
var task = "<img width='554' height='344' src='https://static.igem.org/mediawiki/2015/f/fb/ZJU-test-Img.png' />";
+
−
T$('block2-3').onclick = function(){TINY.box.show(task,0,0,0,1)}
+
−
</script>
+
−
</div>
+
  
  
−
<div class="col-md-3">
 
−
<div class="block" data-rotate-y="270deg" data-move-x="150%" id="block2-4">
 
−
<img style="padding:20%" src="https://static.igem.org/mediawiki/2015/4/43/ZJU-safty.png"/>
 
−
</div>
 
−
<script type="text/javascript">
 
−
var task = "<img width='554' height='344' src='https://static.igem.org/mediawiki/2015/f/fb/ZJU-test-Img.png' />";
 
−
T$('block2-4').onclick = function(){TINY.box.show(task,0,0,0,1)}
 
−
</script>
 
−
</div>
 
  
 +
<style type="text/css">
  
 +
.divcss5_list_title{background:#eeeeee; border:1px solid #cccccc; padding:1em;}
  
−
</div>
+
.divcss5_list_content{padding:1em;}
  
−
<div style=";text-align: center; width: 100%;height: 0;z-index: 99;">
+
#tinybox{position:absolute; display:none; padding:10px; background:#ffffff url(https://static.igem.org/mediawiki/2015/2/2a/ZJU-test-Preload.gif) no-repeat 50% 50%; border:10px solid #e3e3e3; z-index:2000;}
−
<a href="#globalWrapper">
+
−
<img src="https://static.igem.org/mediawiki/2015/1/16/ZJU_up.png" style="width:10%;height:40px;" />
+
−
</a>
+
−
</div>
+
  
 +
#tinymask{position:absolute; display:none; top:0; left:0; height:100%; width:100%; background:#000000; z-index:1500;}
  
 +
#tinycontent{background:#ffffff; font-size:1.1em;}
  
−
  </div>
+
#n{margin:10px auto; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;}
−
    <script type="text/javascript" src="https://2015.igem.org/Team:ZJU-China/js/home/ZJU-jquery.smoove.min.js?action=raw&amp;ctype=text/javascript"></script>
+
−
    <script>$('.block').smoove({offset:'40%'});</script>
+
  
 +
#n a{ padding:0 4px; color:#333}
 +
</style>
  
  
  
−
</div>
+
<script type="text/javascript" src="https://2015.igem.org/Team:ZJU-China/js/home/ZJU-tinybox.js?action=raw&amp;ctype=text/javascript"></script>  
  
 +
<div class="divcss5_list_title"><b>图片</b><a class="ml20" href="#" id="click_test2">效果预览</a></div>
 +
 
 +
<script type="text/javascript">
  
 +
        var content2 = "<img width='554' height='344' src='https://static.igem.org/mediawiki/2015/f/fb/ZJU-test-Img.png' />";
 +
        T$('click_test2').onclick = function(){TINY.box.show(content2,0,0,0,1)}
  
 +
        </script>
 +
<br><br>
 
</body></html>
 
</body></html>

Revision as of 10:12, 6 September 2015

Image 1
Image 2
Image 3

INTRODUCE

图片效果预览