Team:ZJU-China/Notebook/week1

From 2011.igem.org

(Difference between revisions)
 
(42 intermediate revisions not shown)
Line 1: Line 1:
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
<html>  
-
<head>
+
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
-
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
+
-
<link href='http://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
+
-
<title>无标题文档</title>
+
-
<style type="text/css">
+
-
<!--
+
-
#week1 {
+
-
background-color: #e9e9e9;
+
-
width:710px;
+
-
font-family: 'Molengo', sans-serif;
+
-
}
+
-
.subblock {
+
-
background-color: #FFF;
+
-
margin:10px;
+
-
vertical-align: middle;
+
-
width: 680px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
border-radius: 5px;
+
-
}
+
-
#mondy h3 {
+
-
color: #90b5d5;
+
-
}
+
-
.subblock hr{
+
-
height:2px;
+
-
margin-left:10px;
+
-
margin-right:10px;
+
-
}
+
-
p {
+
-
margin: 5px;
+
-
padding: 5px;
+
-
}
+
-
h3{
+
-
+
-
margin:10px;}
+
-
-->
+
-
</style>
+
-
</head>
+
 +
<head>
 +
<style type="text/css">
 +
 +
#banner {position:relative; width:950px; height:345px; border:1px solid #666; overflow:hidden;}
 +
#banner_list img {border:0px;width:950px; height:343px;}
 +
 +
#banner ul {position:absolute;list-style-type:none;filter: Alpha(Opacity=80);opacity:0.8; border:1px solid #fff;z-index:1002;
 +
            margin:0; padding:0; bottom:3px; right:5px;}
 +
#banner ul li { padding:0px 8px;float:left;display:block;color:#FFF;border:#e5eaff 1px solid;background:#6f4f67;cursor:pointer}
 +
#banner ul li.on { background:#900}
 +
#banner_list a{position:absolute;} <!-- 让四张图片都可以重叠在一起-->
 +
</style>
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 +
</head>
 +
<body>
<body>
-
<div class="iblock" id="week1">
+
 
-
  <div class="subblock" id="mondy"><h3>Monday</h3>
+
<script type="text/javascript">
-
      <hr/>
+
    var t = n = 0, count;
-
      <p>  We are a young and happy team of 13 scientists and engineers from very diverse backgrounds.Although this is our first
+
    $(document).ready(function(){   
-
year working on a wet lab project and biofilm experiments are new to us, we're currently taking great efforts to build
+
        count=$("#banner_list a").length;
-
the whole system for experiments.Our team progress and more info will be frequently updated so that our iGEM
+
        $("#banner_list a:not(:first-child)").hide();
-
experience could be shared as much as possible along the way. We truly welcome you to contact us for any
+
        $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
-
cooperation or suggestion.</p></div>
+
        $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
-
    <div class="subblock" id="mondy"><h3>Tuesday</h3>
+
        $("#banner li").click(function() {
-
      <hr/>
+
            var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
-
      <p> We are a young and happy team of 13 scientists and engineers from very diverse backgrounds.Although this is our first
+
            n = i;
-
year working on a wet lab project and biofilm experiments are new to us, we're currently taking great efforts to build
+
            if (i >= count) return;
-
the whole system for experiments.Our team progress and more info will be frequently updated so that our iGEM
+
            $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
-
experience could be shared as much as possible along the way. We truly welcome you to contact us for any
+
            $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
-
cooperation or suggestion.</p></div>
+
            $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
 +
            document.getElementById("banner").style.background="";
 +
            $(this).toggleClass("on");
 +
            $(this).siblings().removeAttr("class");
 +
        });
 +
        t = setInterval("showAuto()", 4000);
 +
        $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
 +
    })
 +
   
 +
    function showAuto()
 +
    {
 +
        n = n >=(count - 1) ? 0 : ++n;
 +
        $("#banner li").eq(n).trigger('click');
 +
    }
 +
</script>
 +
 
 +
 
 +
<div id="banner">  
 +
    <div id="banner_bg"></div>  <!--标题背景-->
 +
    <div id="banner_info"></div> <!--标题-->
 +
    <ul>
 +
        <li class="on">1</li>
 +
        <li>2</li>
 +
        <li>3</li>
 +
        <li>4</li>
 +
   <li>5</li>
 +
  <li>6</li>
 +
    </ul>
 +
  <div id="banner_list">
 +
        <a href="#" target="_blank"><img src="https://static.igem.org/mediawiki/2011/e/e2/Zju-h1.jpg" title="" alt="" /></a>
 +
        <a href="#" target="_blank"><img src="https://static.igem.org/mediawiki/2011/0/00/Zju-h2.jpg" title="" alt="" /></a>
 +
        <a href="#" target="_blank"><img src="https://static.igem.org/mediawiki/2011/5/54/Zju-h3.jpg" title="" alt="" /></a>
 +
        <a href="#" target="_blank"><img src="https://static.igem.org/mediawiki/2011/7/7f/Zju-h4.jpg" title="" alt="" /></a>
 +
  <a href="#" target="_blank"><img src="https://static.igem.org/mediawiki/2011/8/86/Zju-h5.jpg" title="" alt="" /></a>
 +
  <a href="#" target="_blank"><img src="https://static.igem.org/mediawiki/2011/7/76/Zju-h6.jpg" title="" alt="" /></a>
 +
    </div>
</div>
</div>
</body>
</body>
 +
</html>
</html>

Latest revision as of 03:34, 5 October 2011

Retrieved from "http://2011.igem.org/Team:ZJU-China/Notebook/week1"