Team:NUDT CHINA/Team

From 2014.igem.org

(Difference between revisions)
(Prototype team page)
Line 1: Line 1:
{{CSS/Main}}
{{CSS/Main}}
 +
 +
<style type="text/css">
 +
body{font-family:"微软雅黑";}
 +
img{border:none;}
 +
 +
/* scrollpic */
 +
.scrollpic{max-width:1048px;min-height:550px;margin:20px auto;}
 +
#myscroll{display:block; width:100%; position:relative; height:390px; overflow:hidden;}
 +
#myscroll #myscrollbox{display:block; float:left; position:absolute; left:0; top:0; width:1000000px;}
 +
#myscroll ul{display:block; float:left; list-style-type:none; padding:0; margin:0;}
 +
#myscroll ul li{display:block; float:left; padding:0; margin:0;}
 +
#myscroll ul li a{display:block; float:left; width:242px; padding:0 10px; position:relative; height:390px; color:#333;}
 +
#myscroll a .intro{position:absolute; left:0; z-index:10; background-color:rgba(255,255,255,.80); padding:0 10px;}
 +
#myscroll a .intro h5{padding:0; margin:0; font-size:16px; font-weight:bold; padding:0 47px 0 15px; background:url(images/go.png) right no-repeat; height:40px; width:180px; line-height:40px; border-bottom:1px solid rgba(215,0,15,.2);}
 +
#myscroll a .intro p{font-size:13px; line-height:20px; margin:10px 15px; height:40px; overflow:hidden;}
 +
#myscroll a .intro{bottom:-61px;}
 +
#myscroll a:hover .intro{bottom:0px;}
 +
 +
#mybtns{margin:10px; width:100%; display:block; height:42px;}
 +
#mybtns a{width:42px; height:42px; display:block; float:left; margin-right:1px; background-color: #c1c1c1;}
 +
#mybtns a:hover{background-color: #d7000f;}
 +
#mybtns a:hover, #myscroll, #mybtns a,#myscroll a:hover .intro, #myscroll a .intro,#myscroll #myscrollbox{
 +
-webkit-transition: all 0.5s ease;
 +
-moz-transition: all 0.5s ease;
 +
-ms-transition: all 0.5s ease;
 +
-o-transition: all 0.5s ease;
 +
transition: all 0.5s ease;
 +
}
 +
#mybtns #left{background-image:url(images/jt_l.png);}
 +
#mybtns #right{background-image:url(images/jt_r.png);}
 +
 +
@media(min-width:1572px){
 +
.scrollpic{max-width:1572px; width:100%;}
 +
#myscroll{width:1572px;}
 +
}
 +
@media(max-width:1571px){
 +
.scrollpic{max-width:1310px; width:100%;}
 +
#myscroll{width:1310px;}
 +
}
 +
@media(max-width:1309px){
 +
.scrollpic{max-width:1048px; width:100%;}
 +
#myscroll{width:1048px;}
 +
}
 +
@media(max-width:1047px){
 +
.scrollpic{max-width:786px; width:100%;}
 +
#myscroll{width:786px;}
 +
}
 +
@media(max-width:767px){
 +
.scrollpic{max-width:524px; width:100%;}
 +
#myscroll{width:524px;}
 +
}
 +
@media(max-width:523px){
 +
.scrollpic{max-width:262px; width:100%;}
 +
#myscroll{width:262px;}
 +
}
 +
/*浏览器宽度变化时需刷新页面才能正常显示*/
 +
</style>
 +
<script type="text/javascript" src="js/jquery.min.js"></script>
 +
<script type="text/javascript">
 +
$(document).ready(function() {
 +
  var blw=$("#myscrollbox li").width();
 +
  //获取单个子元素所需宽度
 +
  var liArr = $("#myscrollbox ul").children("li");
 +
  //获取子元素数量
 +
  var mysw = $("#myscroll").width();
 +
  //获取子元素所在区域宽度
 +
  var mus = parseInt(mysw/blw);
 +
  //计算出需要显示的子元素的数量
 +
  var length = liArr.length-mus;
 +
  //计算子元素可移动次数（被隐藏的子元素数量）
 +
  var i=0
 +
  $("#right").click(function(){
 +
  i++
 +
  //点击i加1
 +
  if(i<length){
 +
      $("#myscrollbox").css("left",-(blw*i));
 +
  //子元素集合向左移动，距离为子元素的宽度乘以i。
 +
  }else{
 +
  i=length;
 +
  $("#myscrollbox").css("left",-(blw*length));
 +
  //超出可移动范围后点击不再移动。最后几个隐藏的元素显示时i数值固定位已经移走的子元素数量。
 +
      }
 +
      });
 +
  $("#left").click(function(){
 +
  i--
 +
  //点击i减1
 +
  if(i>=0){
 +
    $("#myscrollbox").css("left",-(blw*i));
 +
//子元素集合向右移动，距离为子元素的宽度乘以i。
 +
  }else{
 +
i=0;
 +
$("#myscrollbox").css("left",0);
 +
//超出可移动范围后点击不再移动。最前几个子元素被显示时i为0。
 +
      }
 +
      });
 +
});
 +
</script>
 +
 +
<div class="scrollpic">
 +
<div id="mybtns">
 +
  <a href="javascript:;" id="left"></a>
 +
  <a href="javascript:;" id="right"></a>
 +
</div>
 +
<div id="myscroll">
 +
<div id="myscrollbox">
 +
<ul>
 +
<li><a href="https://2014.igem.org/wiki/index.php?title=Team:NUDT_CHINA/Team"><img src="http://sc.admin5.com/images/01.jpg" width="242" height="390"><span class="intro"><h5>Qiu Xinyuan</h5><p>the introduce to Qiu Xinyuan</p></span></a></li>
 +
<li><a href="https://2014.igem.org/wiki/index.php?title=Team:NUDT_CHINA/Team"><img src="http://sc.admin5.com/images/02.jpg" width="242" height="390"><span class="intro"><h5>Li Miyang</h5><p>the introduce to Li Miyang</p></span></a></li>
 +
<li><a href="https://2014.igem.org/wiki/index.php?title=Team:NUDT_CHINA/Team"><img src="http://sc.admin5.com/images/03.jpg" width="242" height="390"><span class="intro"><h5>Zhu Qianhui</h5><p>the introduce to Zhu Qianhui</span></a></li>
 +
<li><a href="https://2014.igem.org/wiki/index.php?title=Team:NUDT_CHINA/Team"><img src="http://sc.admin5.com/images/04.jpg" width="242" height="390"><span class="intro"><h5>Xie Nianhao</h5><p>the introduce to Xie Nianhao</p></span></a></li>
 +
<li><a href="https://2014.igem.org/wiki/index.php?title=Team:NUDT_CHINA/Team"><img src="http://sc.admin5.com/images/01.jpg" width="242" height="390"><span class="intro"><h5>Zhang Chuyuan</h5><p>the introduce to Zhang Chuyuan</p></span></a></li>
 +
<li><a href="https://2014.igem.org/wiki/index.php?title=Team:NUDT_CHINA/Team"><img src="http://sc.admin5.com/images/02.jpg" width="242" height="390"><span class="intro"><h5>Han Jize</h5><p>the introduce to Han Jize</p></span></a></li>
 +
<li><a href="https://2014.igem.org/wiki/index.php?title=Team:NUDT_CHINA/Team"><img src="http://sc.admin5.com/images/03.jpg" width="242" height="390"><span class="intro"><h5>Liu Long</h5><p>the introduce to Liu Long</p></span></a></li>
 +
<li><a href="https://2014.igem.org/wiki/index.php?title=Team:NUDT_CHINA/Team"><img src="http://sc.admin5.com/images/04.jpg" width="242" height="390"><span class="intro"><h5>Liu Qijun</h5><p>the introduce to Liu Qijun</p></span></a></li>
 +
<li><a href="https://2014.igem.org/wiki/index.php?title=Team:NUDT_CHINA/Team"><img src="http://sc.admin5.com/images/01.jpg" width="242" height="390"><span class="intro"><h5>Zhu Lingyun</h5><p>the introduce to Zhu Lingyun</p></span></a></li>
 +
<li><a href="https://2014.igem.org/wiki/index.php?title=Team:NUDT_CHINA/Team"><img src="http://sc.admin5.com/images/02.jpg" width="242" height="390"><span class="intro"><h5>Wu xiaomin</h5><p>the introduce to Wu Xiaomin</p></span></a></li>
 +
<li><a href="https://2014.igem.org/wiki/index.php?title=Team:NUDT_CHINA/Team"><img src="http://sc.admin5.com/images/03.jpg" width="242" height="390"><span class="intro"><h5>Zhu lvyun</h5><p>the introduce to Zhu lvyun</p></span></a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
</div>
 +
<html>
<html>
 +
 +
<!--main content -->
<!--main content -->

Revision as of 15:40, 9 October 2014

<style type="text/css"> body{font-family:"微软雅黑";} img{border:none;}

/* scrollpic */ .scrollpic{max-width:1048px;min-height:550px;margin:20px auto;}

  1. myscroll{display:block; width:100%; position:relative; height:390px; overflow:hidden;}
  2. myscroll #myscrollbox{display:block; float:left; position:absolute; left:0; top:0; width:1000000px;}
  3. myscroll ul{display:block; float:left; list-style-type:none; padding:0; margin:0;}
  4. myscroll ul li{display:block; float:left; padding:0; margin:0;}
  5. myscroll ul li a{display:block; float:left; width:242px; padding:0 10px; position:relative; height:390px; color:#333;}
  6. myscroll a .intro{position:absolute; left:0; z-index:10; background-color:rgba(255,255,255,.80); padding:0 10px;}
  7. myscroll a .intro h5{padding:0; margin:0; font-size:16px; font-weight:bold; padding:0 47px 0 15px; background:url(images/go.png) right no-repeat; height:40px; width:180px; line-height:40px; border-bottom:1px solid rgba(215,0,15,.2);}
  8. myscroll a .intro p{font-size:13px; line-height:20px; margin:10px 15px; height:40px; overflow:hidden;}
  9. myscroll a .intro{bottom:-61px;}
  10. myscroll a:hover .intro{bottom:0px;}
  1. mybtns{margin:10px; width:100%; display:block; height:42px;}
  2. mybtns a{width:42px; height:42px; display:block; float:left; margin-right:1px; background-color: #c1c1c1;}
  3. mybtns a:hover{background-color: #d7000f;}
  4. mybtns a:hover, #myscroll, #mybtns a,#myscroll a:hover .intro, #myscroll a .intro,#myscroll #myscrollbox{

-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

  1. mybtns #left{background-image:url(images/jt_l.png);}
  2. mybtns #right{background-image:url(images/jt_r.png);}

@media(min-width:1572px){ .scrollpic{max-width:1572px; width:100%;}

  1. myscroll{width:1572px;}

} @media(max-width:1571px){ .scrollpic{max-width:1310px; width:100%;}

  1. myscroll{width:1310px;}

} @media(max-width:1309px){ .scrollpic{max-width:1048px; width:100%;}

  1. myscroll{width:1048px;}

} @media(max-width:1047px){ .scrollpic{max-width:786px; width:100%;}

  1. myscroll{width:786px;}

} @media(max-width:767px){ .scrollpic{max-width:524px; width:100%;}

  1. myscroll{width:524px;}

} @media(max-width:523px){ .scrollpic{max-width:262px; width:100%;}

  1. myscroll{width:262px;}

} /*浏览器宽度变化时需刷新页面才能正常显示*/ </style> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var blw=$("#myscrollbox li").width(); //获取单个子元素所需宽度 var liArr = $("#myscrollbox ul").children("li"); //获取子元素数量 var mysw = $("#myscroll").width(); //获取子元素所在区域宽度 var mus = parseInt(mysw/blw); //计算出需要显示的子元素的数量 var length = liArr.length-mus; //计算子元素可移动次数（被隐藏的子元素数量） var i=0 $("#right").click(function(){ i++ //点击i加1 if(i<length){ $("#myscrollbox").css("left",-(blw*i)); //子元素集合向左移动，距离为子元素的宽度乘以i。 }else{ i=length; $("#myscrollbox").css("left",-(blw*length)); //超出可移动范围后点击不再移动。最后几个隐藏的元素显示时i数值固定位已经移走的子元素数量。 } 

     });

$("#left").click(function(){ i-- //点击i减1 if(i>=0){ $("#myscrollbox").css("left",-(blw*i)); //子元素集合向右移动，距离为子元素的宽度乘以i。 }else{ i=0; $("#myscrollbox").css("left",0); //超出可移动范围后点击不再移动。最前几个子元素被显示时i为0。 } 

     });

}); </script>

<a href="javascript:;" id="left"></a> <a href="javascript:;" id="right"></a>

Retrieved from "http://2014.igem.org/Team:NUDT_CHINA/Team"