Team:HZAU-China/Human practice

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
{{:Team：HZAU-China/background-head}}
{{:Team：HZAU-China/background-head}}
<html>
<html>
 +
<head>
 +
<script src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js"></script>
<style>
<style>
-
#background{
+
body { font-size:12px; padding:0}
-
    background-color: #FFF;
+
-
+
-
    min-height: 800px;
+
-
    width: 1000px;
+
-
}
+
-
#sidebar {
+
-
    background-color:transparent;
+
-
    clear: both;
+
-
    float: left;
+
-
    height: auto;
+
-
    width: 210px;
+
-
    padding-top: 5px;
+
-
    padding-left: 10px;
+
-
}
+
-
#paragraphs {
+
-
    background-color: #FFF;
+
-
    border: 3px solid #000;
+
-
    float: right;
+
-
    height: auto;
+
-
    margin-bottom: 5px;
+
-
    margin-top: 5px;
+
-
    padding:10px;
+
-
    padding-right:15px;
+
-
    width: 720px;
+
-
}
+
</style>
</style>
-
<body>
+
<script language="javascript">
-
<div id="background">
+
pic={
-
 
+
href:"https://static.igem.org/mediawiki/2013/8/80/Old_wall.jpg",
-
  <div id="sidebar">
+
boxSize:250,
-
<style>
+
width:1330,
-
*{margin:0px;padding:0px;}
+
height:2128,
-
ul.menu_scroll{z-index:100;padding:10px;margin:0 auto;padding-bottom: 5px;top:20px;position:fixed;width:100%;}
+
creatImg:function(id){//创建图片
-
ul.menu:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
+
var width = $("#"+id).css("width");
-
ul.menu,
+
$("#"+id).append("<img src='"+this.href+"'  style='width:"+width+"'/>");
-
ul.menu ul {padding:0;margin:0;list-style:none;position:;width:200px;background:#ddd;font-family:arial, sans-serif;}
+
$("#"+id).append("<div id='bigImg'></div>");
-
ul.menu {z-index:100;padding:10px;margin:0 auto;}
+
-
ul.menu ul {z-index:50;
+
var that = this;
-
-webkit-transition: 0.5s;
+
$("#"+id).mousemove(function(e){
-
-moz-transition: 0.5s;
+
var x = e.pageX-$(this).offset().left;
-
-ms-transition: 0.5s;
+
var y = e.pageY-$(this).offset().top;
-
-o-transition: 0.5s;
+
if((x<parseInt(width) && x>0) && (y<that.height/that.multiple() && y>0)){
-
transition: 0.5s;
+
$("#bigImg").fadeIn(200);
 +
that.creatBigImg(x,y);
 +
}else{
 +
$("#bigImg").fadeOut(200);
 +
}
 +
});
 +
 +
},
 +
 +
multiple:function(id){//和实际图片的倍数关系
 +
return this.width/parseInt($("#pic").css("width"));
 +
},
 +
 +
bigBoxPost:function(x,y){//大图的坐标
 +
return [x-this.boxSize/2,y-this.boxSize/2];
 +
},
 +
 +
bigLoadPost:function(x,y){//大图的坐标
 +
return [-(x*this.multiple()-this.boxSize/2),-(y*this.multiple()-this.boxSize/2)];
 +
},
 +
 +
creatBigImg:function(x,y){
 +
var that = this;
 +
$("#bigImg").css({
 +
width:that.boxSize,
 +
height:that.boxSize,
 +
border:"#FFF 5px solid",
 +
position:"absolute",
 +
top:that.bigBoxPost(x,y)[1],
 +
left:that.bigBoxPost(x,y)[0],
 +
background:"url("+that.href+") no-repeat",
 +
backgroundPosition:that.bigLoadPost(x,y)[0]+"px "+that.bigLoadPost(x,y)[1]+"px"
 +
})
 +
}
}
}
-
ul.menu li {line-height:30px;position:relative;text-indent:10px;}
 
-
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 label.open {display:block;background:#c00  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;}
 
-
ul.menu label.open b {color:#ff0;}
 
-
ul.menu span {display:block;background:#c00;line-height:30px;position:relative;z-index:100;font-size: 16px;}
 
-
ul.menu label img {position:absolute;left:0;top:0;width:100%;height:30px;}
 
-
ul.menu ul li {margin-top:-30px;
 
-
-webkit-transition: 0.5s;
 
-
-moz-transition: 0.5s;
 
-
-ms-transition: 0.5s;
 
-
-o-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:hover {background:#ddd;}
 
-
ul.menu input {position:absolute;left:-9999px;}
 
-
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 li {margin-top:0;}
 
-
ul.menu label.close {display:block;width:200px;height:30px;background:transparent url("/jscss/demoimg/201208/u-arrow.gif")
 
-
 
-
no-repeat 170px 12px;line-height:30px;position:relative;left:0;z-index:90;margin-top:-30px}
 
-
ul.menu input.tabs:checked ~ label.close {display:block;z-index:200;}
 
-
ul.menu input.close:checked + label.close {display:none;}
 
-
ul.menu input.close:checked ~ ul {background:#ddd;padding-bottom:0;}
 
-
ul.menu input.close:checked ~ ul li {margin-top:-30px;}
 
-
</style>
 
-
<script src="/ajaxjs/jquery-1.7.2.min.js" type="text/javascript"></script>
 
-
<script type="text/javascript">
 
$(document).ready(function(){
$(document).ready(function(){
-
var topMain=$("#sidebar").height()+100//是头部的高度加头部与nav导航之间的距离
+
pic.creatImg("pic");
-
var menu=$(".menu");
+
-
$(window).scroll(function(){
+
-
if ($(window).scrollTop()>topMain){//如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll，否则就移除
+
-
menu.addClass("menu_scroll");
+
-
}else{
+
-
menu.removeClass("menu_scroll");
+
-
}
+
-
});
+
})
})
</script>
</script>
-
 
+
</head>
-
<body>
+
<body >
-
<ul class="menu">
+
<div id="pic" style=" width:1000px; position: relative; margin:100px;"></div>
-
        <li><a href="https://2013.igem.org/Team:HZAU-China/Human_practice=1"><span>Meeting with WHU and HUST</span></a></li>
+
</body >
-
        <li><a href="https://2013.igem.org/Team:HZAU-China/Human_practice=2"><span>Visit To Keqian Biotech Company</span></a></li>
+
-
        <li><a href="https://2013.igem.org/Team:HZAU-China/Human_practice=3"><span>To make IGEM and Synthetic Biology Universal</span></a></li>
+
-
        <li><a href="https://2013.igem.org/Team:HZAU-China/Human_practice=4"><span>Understanding the Safety assessment of GM rice</span></a></li>       
+
-
</body>
+
-
 
+
-
  </div>
+
-
  <div id="paragraphs">
+
-
<p>
+
-
<br>
+
-
</p>
+
-
<center>
+
-
<span style="font-size:46px;font-family:Cambria;margin-top:10px;line-height:80%">Human practice</span>
+
-
</center>
+
-
<p>
+
-
<br>
+
-
</p>
+
-
 
+
-
<a name="1">
+
-
<h1>Meeting with WHU and HUST</h1>
+
-
</a>
+
-
<p></p>
+
-
 
+
-
<a name=2">
+
-
<h1>Visit to Wuhan Institute of Biological Products</h1>
+
-
</a>
+
-
<p></p>
+
-
 
+
-
<a name="3">
+
-
<h1>To make IGEM and Synthetic Biology Universal</h1>
+
-
</a>
+
-
<p></p>
+
-
 
+
-
<a name="4">
+
-
<h1>Understanding the Safety assessment of GM rice</h1>
+
-
</a>
+
-
<p></p>
+
-
 
+
-
  </div>
+
-
</div>
+
-
</body>
+
</html>
</html>
-
 
{{:Team：HZAU-China/background-footer}}
{{:Team：HZAU-China/background-footer}}
<br/>
<br/>

Revision as of 04:58, 2 September 2013


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