Team:BIT/Team 3

From 2014.igem.org

(Difference between revisions)
 
(8 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
{{CSS/Main}}
-
<head>
+
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
-
<title>radiation measurement</title>
+
-
 
+
-
<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type=text/javascript></SCRIPT>
+
-
<script src="js/dropdown.js" type="text/javascript"></script>
+
-
<script src="js/jquery.js" type="text/javascript"></script>
+
-
<script src="js/index.js" type="text/javascript"></script>
+
-
 
+
-
<script>
+
-
 
+
-
 
+
-
function changeImg(){
+
-
document.getElementsByClassName("gif1").src="img/BIT_20140725104903.gif";
+
-
+
-
+
-
}
+
-
$(document).ready(function(){
+
-
$(".nav li").mouseover(function(){
+
-
$(this).css("background","rgba(255,255,255,0.8)")
+
-
});
+
-
$(".nav  li").mouseout(function(){
+
-
$(this).css("background","none")
+
-
});
+
-
});
+
-
 
+
-
$(document).ready(function(){
+
-
$('ul.one').hide();
+
-
+
-
//Open Menu
+
-
$('.nav li').hover(
+
-
function(){
+
-
var openMenu= $(this).children('ul.one');
+
-
$(openMenu).show();
+
-
},
+
-
function(){
+
-
var openMenu= $(this).children('ul.one');
+
-
$(openMenu).hide();
+
-
});
+
-
+
-
});
+
-
</script>
+
-
 
+
-
<style type="text/css">
+
-
  #logo{ width:1024px; margin:auto; height:45px;}
+
-
#logo img{ position:absolute;left:485px;}
+
-
#address{width:1024px; height:50px; }
+
-
+
-
#others{
+
-
margin:auto 0;
+
-
width:1024px;
+
-
height:130px;
+
-
margin-top:10px;
+
-
}
+
-
#address p{ text-align:center; line-height:5px;}
+
-
body{ font-family:"helvetica"; margin:0;}
+
-
#container{width:1024px;margin:auto;  position:relative;background:rgba(255,255,255,0.5);
+
-
          }
+
-
 
+
-
 
+
-
#header{width:1024px;
+
-
        height:255px;
+
-
text-align:center;
+
-
background:url(../img/BIT_radiation1.jpg);
+
-
margin:auto;
+
-
position:relative;
+
-
+
-
+
-
}
+
-
 
+
-
#content{height:420px;
+
-
        width:1024px;
+
-
margin:auto;
+
-
background-color:#FFF;
+
-
+
-
position:relative;
+
-
}
+
-
 
+
-
#footer ul{ margin:25px 20px 0 0;}
+
-
#footer li.style{ width:40px;}
+
-
#footer li{
+
-
list-style:none;
+
-
float:right;
+
-
box-shadow:none;
+
-
border-radius:0;
+
-
margin:0;
+
-
padding:0;
+
-
width:90px; }
+
-
#footer{
+
-
width:1024px;
+
-
position:relative;
+
-
margin:auto;
+
-
margin-top:0;
+
-
background-color:#FFF;
+
-
color:#000;
+
-
height:140px;
+
-
font-size:12px;
+
-
+
-
}
+
-
#table1{ width:500px; position:absolute; table-layout:fixed;
+
-
left:130px; height:100px}
+
-
 
+
-
 
+
-
td{width: 170px;  padding:10px 10px 0 10px; word-wrap:break-word;  }
+
-
 
+
-
 
+
-
 
+
-
#table1 img{ width:20px; height:20px;vertical-align:text-bottom; margin-right:10px; }
+
-
 
+
-
@font-face{ font-family:"Maiandra" ;src:url(../fonts/Arabica.swf);format("opentype");}
+
-
 
+
-
 
+
-
#menubar {
+
-
    position: absolute;
+
-
height:20px;
+
-
    white-space: nowrap;
+
-
    top: 0px;
+
-
    width: 500px;
+
-
    z-index: 5;
+
-
    font-family: sans-serif;
+
-
    font-size: 20sp;
+
-
   
+
-
}
+
-
 
+
-
.left-menu, .left-menu a {
+
-
    left: 0px;
+
-
    text-align: left;
+
-
    color:transparent;
+
-
    text-transform: lowercase;
+
-
+
-
}
+
-
 
+
-
.left-menu:hover {
+
-
    color: white;
+
-
    background-color: #555555
+
-
}
+
-
.right-menu, .right-menu a {
+
-
    right: 0px;
+
-
    text-align: right;
+
-
    color: white;
+
-
}
+
-
#menubar ul {
+
-
 
+
-
    list-style: none;
+
-
margin:0px;
+
-
+
-
}
+
-
#menubar li {
+
-
    display: inline;
+
-
    position: relative;
+
-
    cursor: pointer;
+
-
    padding-left: 0px;
+
-
    padding-right: 0px;
+
-
}
+
-
.left-menu li a {
+
-
    padding: 0px 10px 0px 0px;
+
-
text-decoration:none;
+
-
color: inherit;
+
-
}
+
-
.left-menu li a:hover {
+
-
    color: #aaaaff;
+
-
    text-decoration: none;
+
-
}
+
-
.left-menu li a:visited{
+
-
    color: #69F;
+
-
    text-decoration: none;
+
-
}
+
-
 
+
-
 
+
-
.right-menu li a {
+
-
    padding: 1.5px 15px 1.5px 10px;
+
-
 
+
-
    background-color: #606060;
+
-
text-decoration:none;
+
-
margin:0px;
+
-
}
+
-
.right-menu li a:link {
+
-
    color: white;
+
-
    text-decoration: none;
+
-
}
+
-
.right-menu li a:hover {
+
-
    color: #aaaaff;
+
-
    text-decoration: none;
+
-
}
+
-
.right-menu li a:visited{
+
-
    color: #69F;
+
-
    text-decoration: none;
+
-
}
+
-
 
+
-
.nav a, .nav h3, .nav h5, .one li a{
+
-
text-transform: uppercase;
+
-
}
+
-
.nav a{
+
-
display:block;
+
-
text-decoration: none;
+
-
}
+
-
.nav i {
+
-
display: block;
+
-
padding: 0 5px;
+
-
float: none;
+
-
}
+
-
.nav li {
+
-
list-style: none;
+
-
}
+
-
.nav p {
+
-
+
-
+
-
font-size: 13px;
+
-
line-height: 23px;
+
-
+
-
}
+
-
.nav input,
+
-
.nav textarea{
+
-
display:block;
+
-
border:none;
+
-
}
+
-
.nav h3 {
+
-
margin:0 0 13px 0;
+
-
padding:3px 0 5px 0;
+
-
border-bottom:1px solid rgba(51,51,51,.2);
+
-
+
-
font-size: 20px;
+
-
}
+
-
.nav h5 {
+
-
font-size: 16px;
+
-
}
+
-
.nav h6{
+
-
line-height: 20px;
+
-
+
-
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
+
-
font-size:13px;
+
-
font-style:italic;
+
-
}
+
-
.nav img {
+
-
padding: 5px;
+
-
+
-
box-shadow: 1px 1px 4px rgba(102,102,102,.4);
+
-
-webkit-box-shadow: 1px 1px 4px rgba(102,102,102,.4);
+
-
-moz-box-shadow: 1px 1px 4px rgba(102,102,102,.4);
+
-
+
-
transition: all .3s;
+
-
-webkit-transition: all .3s;
+
-
-moz-transition: all .3s;
+
-
-o-transition: all .3s;
+
-
-ms-transition: all .3s;
+
-
}
+
-
.nav img:hover {
+
-
transform:scale(1.1);
+
-
-webkit-transform:scale(1.1);
+
-
-moz-transform:scale(1.1);
+
-
-ms-transform:scale(1.1);
+
-
-o-transform:scale(1.1);
+
-
}
+
-
 
+
-
 
+
-
 
+
-
.label{ color:#FFF;}
+
-
.nav {
+
-
display: block;
+
-
position:absolute;
+
-
top:230px;
+
-
left:100px;
+
-
+
-
height:50px;
+
-
margin: 0 0 20px 0 ;
+
-
padding:0 5px;
+
-
+
-
border-radius: 3px;
+
-
-webkit-border-radius: 3px;
+
-
-moz-border-radius: 3px;
+
-
+
-
+
-
+
-
+
-
}
+
-
.nav li {
+
-
position: relative;
+
-
z-index:2;
+
-
}
+
-
.nav > li {
+
-
display: block;
+
-
float:left;
+
-
color:#000;
+
-
+
-
border-right:1px solid #FFF;
+
-
}
+
-
.nav > li:hover {
+
-
cursor: pointer;
+
-
}
+
-
.nav li > a{
+
-
+
-
+
-
font-size: 15px;
+
-
text-align:center;
+
-
margin:0 15px 0;
+
-
+
-
transition: background-color .7s;
+
-
-webkit-transition: background-color .7s;
+
-
-moz-transition: background-color .5s;
+
-
-o-transition: background-color .5s;
+
-
-ms-transition: background-color .5s;
+
-
}
+
-
.nav li:last-child{
+
-
border:none;
+
-
}
+
-
 
+
-
 
+
-
.nav .one {
+
-
display: block;
+
-
position: absolute;
+
-
top: 100%;
+
-
left: 0%;
+
-
+
-
box-shadow: 1px 1px 1px rgba(102,102,102,.2);
+
-
-webkit-box-shadow: 1px 1px 1px rgba(102,102,102,.2);
+
-
-moz-box-shadow: 1px 1px 1px rgba(102,102,102,.2);
+
-
+
-
transition: background-color .3s ease-out;
+
-
-webkit-transition: background-color .3s ease-out;
+
-
-moz-transition: background-color .3s ease-out;
+
-
-o-transition: background-color .3s ease-out;
+
-
-ms-transition: background-color .3s ease-out;
+
-
}
+
-
.one > li {
+
-
float: none;
+
-
width: 160px;
+
-
+
-
}
+
-
.one > li a{
+
-
+
-
margin:5px;
+
-
height:20px;
+
-
+
-
font-size: 11px;
+
-
letter-spacing: 1px;
+
-
}
+
-
.one li i.icon-chevron-right {
+
-
float:right;
+
-
margin:3px 5px 0 0;
+
-
+
-
font-size: 10px;
+
-
}
+
-
 
+
-
.nav li:hover .one > li{
+
-
-webkit-animation: fadeIn .6s 1;
+
-
animation: fadeIn .6s 1;
+
-
}
+
-
 
+
-
#gallery{
+
-
left: 0px;
+
-
+
-
background:rgba(255,255,255,0.5);
+
-
}
+
-
#gallery li{
+
-
width:200px;
+
-
 
+
-
}
+
-
#gallery li .image{
+
-
+
-
width:120px;
+
-
height:30px;
+
-
padding:5px;
+
-
margin:auto;
+
-
border-bottom: 1px solid rgba(51,51,51,.2);
+
-
+
-
+
-
}
+
-
 
+
-
#gallery li img{
+
-
float:left;
+
-
margin:5px 5px 10px 0px;
+
-
width:100px;
+
-
height:150px;
+
-
}
+
-
#gallery .image a{
+
-
+
-
text-align:center;
+
-
line-height:40px;
+
-
+
-
}
+
-
#gallery .image a:hover{
+
-
+
-
color:#69F;
+
-
+
-
}
+
-
#gallery .image a:visited{
+
-
+
-
color:#CCCCCC;
+
-
+
-
}
+
-
#gallery a.more{
+
-
display:block;
+
-
width:35px;
+
-
height:16px;
+
-
padding:0px 4px;
+
-
margin:8px 0 5px 10px;
+
-
cursor: pointer;
+
-
+
-
text-transform:capitalize;
+
-
font-size:10px;
+
-
+
-
border-radius:4px;
+
-
-webkit-border-radius:4px;
+
-
-moz-border-radius:4px;
+
-
+
-
-webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
+
-
-moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
+
-
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
+
-
}
+
-
 
+
-
*{padding:0;list-style-type:none;}
+
-
a,img{border:0;}
+
-
 
+
-
/* case */
+
-
/*.case{background:url(../img/case.jpg) no-repeat;height:627px;overflow:hidden;width:891px;margin:0 auto;}*/
+
-
.case_box{position:relative;margin:15px auto 0px;width:860px;height:270px;overflow:hidden}
+
-
.case_box p{z-index:2;position:absolute;text-indent:-9999px;width:28px;height:51px;top:40%;cursor:pointer}
+
-
.case_box .prev{text-indent:-9999px;background:url(https://static.igem.org/mediawiki/2014/e/e6/BIT_previous.png) no-repeat;left:0px}
+
-
.case_box .next{background:url(https://static.igem.org/mediawiki/2014/a/a0/BIT_next.png) no-repeat;top:40%;right:0px}
+
-
.case_box ul{position:absolute;height:250px;overflow:hidden;top:0px;left:0px}
+
-
.case_box ul li{width:860px;float:left;height:250px; }
+
-
.case_box ul li dl.case_info{line-height:17px;margin:95px 0px 0px 475px;width:295px;zoom:1;color:#616741;font-size:13px;overflow:hidden}
+
-
.case_box ul li dl.case_info dd{text-indent:26px}
+
-
 
+
-
.case_box ul li.case_1{background:url(http:/2014.igem.org/wiki/images/9/92/BIT_radiation1.jpg) no-repeat center top}
+
-
.case_box ul li.case_2{background:url(http:/2014.igem.org/wiki/images/3/3e/BIT_2.jpg) no-repeat center top}
+
-
.case_box ul li.case_3{background:url(http:/2014.igem.org/wiki/images/9/92/BIT_radiation1.jpg) no-repeat center top}
+
-
.case_box ul li.case_4{background:url(http:/2014.igem.org/wiki/images/3/3e/BIT_2.jpg) no-repeat center top}
+
-
.case_box ul li.case_5{background:url(http:/2014.igem.org/wiki/images/9/92/BIT_radiation1.jpg) no-repeat center top}
+
-
.case_box ul li.case_6{background:url(http:/2014.igem.org/wiki/images/3/3e/BIT_2.jpg) no-repeat center top}
+
-
 
+
-
.case_box ul li.case_2 dl{margin-top:150px}
+
-
.case_box ul li.case_3 dl{margin-top:135px}
+
-
.case_box ul li.case_4 dl{margin-top:110px}
+
-
.case_box ul li.case_5 dl{margin-top:120px}
+
-
.case_box ul li.case_6 dl{margin-top:115px}
+
-
 
+
-
.case_info_add dd{line-height:22px}
+
-
 
+
-
.case_box ol{position:absolute;bottom:0;left:50%;margin:10px 0 0 -65px;height:12px;z-index:99;top: 235px;}
+
-
.case_box ol li{float:left;margin:0 4px;display:inline;width:12px;height:12px;line-height:999em;background:url(../img/BIT_pagination.png) no-repeat;overflow:hidden;cursor:pointer;}
+
-
.case_box ol li.active{background-position:0 -12px;}
+
-
 
+
-
 
+
-
</style>
+
-
+
-
+
-
 
+
-
</head>
+
-
 
+
-
<body>
+
-
<div id="container">
+
-
+
 +
<html>
-
<div id="header">
+
<!--main content -->
-
<div id="menubar" class='left-menu '>
+
<table width="70%" align="center">
-
  <ul>
+
-
      <li class='selected'><a href="/WikitemplateA_home">Page</a></li>
+
-
          <li class='new'><a href="/wiki/index.php?title=Talk:WikitemplateA_home&amp;action=edit&amp;redlink=1">Discussion              </a></li>
+
-
          <li><a href="/wiki/index.php?title=WikitemplateA_home&amp;action=edit">View source              </a></li>
+
-
          <li><a href="/wiki/index.php?title=WikitemplateA_home&amp;action=history">History              </a></li>
+
-
          <li style='color:white;cursor:default'>teams</li>
+
-
  </ul>
+
-
</div> <!-- end menubar (left) -->
+
-
<div id="menubar" class="right-menu " >
 
-
    <ul>
 
-
          <li ><a href="/wiki/index.php?title=Special:UserLogin&amp;returnto=WikitemplateA_home" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o">Log in</a></li>         </ul>
 
-
</div><!-- end right menubar -->
 
-
   
 
-
<ul class="nav">
 
-
  <!-- Start Gallery -->
 
-
  <li> <a href="#" class="label">home<i class="icon-chevron-down"></i></a>
 
-
   
 
-
  </li>
 
-
  <!-- End Gallery -->
 
-
  <!-- Start Gallery -->
 
-
  <li> <a href="HTML/project.html" class="label">project<i class="icon-chevron-down"></i></a>
 
-
    <ul class="one" id="gallery">
 
-
      <li style="height:180px;">
 
-
    <!--<img src="img/img1.png" onMouseOver="changeImg()" class="gif1">-->
 
-
        <div class="image"><a>background</a></div>
 
-
        <div class="image"><a>overview</a></div>
 
-
        <div class="image"><a>genecircuit</a></div>
 
-
        <div class="image"><a>achievement</a></div>
 
-
      </li>
 
-
    </ul>
 
-
  </li>
 
-
  <!-- End Gallery -->
 
-
 
 
-
<!-- Start Gallery -->
 
-
  <li> <a href="HTML/team.html" class="label">team<i class="icon-chevron-down"></i></a>
 
-
    <ul class="one" id="gallery" >
 
-
      <li style="height:140px;">
 
-
      <!--<img src="img/img1.png">-->
 
-
        <div class="image"><a style="white-space:nowrap">Team member </a></div>
 
-
        <div class="image"><a>attribution</a></div>
 
-
        <div class="image"><a>sponsor</a></div>
 
-
       
 
-
      </li>
 
-
    </ul>
 
-
  </li>
 
-
  <!-- End Gallery -->
 
-
 
 
-
  <!-- Start Gallery -->
 
-
  <li> <a href="#" class="label">human practice</a>
 
-
    <ul class="one" id="gallery" >
 
-
      <li style="height:250px;">
 
-
      <!--<img src="img/img1.png">-->
 
-
        <div class="image"><a>Overview</a></div>
 
-
        <div class="image"><a>iGEMer</a></div>
 
-
        <div class="image"><a>scientist</a></div>
 
-
        <div class="image"><a style="white-space:nowrap">medical practitioner</a></div>
 
-
        <div class="image"><a>public</a></div>
 
-
        <div class="image"><a style="white-space:nowrap">young generation</a></div>
 
-
      </li>
 
-
    </ul>
 
-
  </li>
 
-
  <!-- End Gallery -->
 
-
 
 
-
  <!-- Start Gallery -->
 
-
  <li> <a href="#" class="label">modeling</a>
 
-
    <ul class="one" id="gallery" >
 
-
      <li style="height:140px;">
 
-
      <!--<img src="img/img1.png">-->
 
-
        <div class="image"><a>Sensor</a></div>
 
-
        <div class="image"><a>amplifier</a></div>
 
-
        <div class="image"><a>system</a></div>
 
-
     
 
-
      </li>
 
-
    </ul>
 
-
  </li>
 
-
  <!-- End Gallery -->
 
-
 
 
-
  <!-- Start Gallery -->
 
-
  <li> <a href="#" class="label">part<i class="icon-chevron-down"></i></a>
 
-
    <ul class="one" id="gallery" >
 
-
      <li style="height:260px;">
 
-
      <!--<img src="img/img1.png">-->
 
-
        <div class="image"><a>Part design</a></div>
 
-
        <div class="image"><a style="white-space:nowrap">submitted parts</a></div>
 
-
        <div class="image"><a style="white-space:nowrap">favorite parts</a></div>
 
-
        <div class="image"><a>Measurement</a></div>
 
-
        <div class="image"><a>Interlab</a></div>
 
-
        <div class="image"><a>data</a></div>
 
-
      </li>
 
-
    </ul>
 
-
  </li>
 
-
  <!-- End Gallery -->
 
-
 
 
-
  <!-- Start Gallery -->
 
-
  <li> <a href="#" class="label">notebook<i class="icon-chevron-down"></i></a>
 
-
    <ul class="one" id="gallery">
 
-
      <li style="height:180px;">
 
-
      <!--<img src="img/img1.png">-->
 
-
        <div class="image"><a>Reference</a></div>
 
-
        <div class="image"><a>material</a></div>
 
-
        <div class="image"><a>method</a></div>
 
-
        <div class="image"><a>record</a></div>
 
-
      </li>
 
-
    </ul>
 
-
  </li>
 
-
  <!-- End Gallery -->
 
-
 
 
-
  <!-- Start Gallery -->
 
-
  <li> <a href="#" class="label">safety<i class="icon-chevron-down"></i></a>
 
-
    <ul class="one" id="gallery">
 
-
      <li style="height:180px;">
 
-
      <!--<img src="img/img1.png">-->
 
-
        <div class="image"><a>lalalala</a></div>
 
-
        <div class="image"><a>lalalala</a></div>
 
-
        <div class="image"><a>lalalala</a></div>
 
-
        <div class="image"><a>lalalala</a></div>
 
-
      </li>
 
-
    </ul>
 
-
  </li>
 
-
  <!-- End Gallery -->
 
-
 
 
-
 
 
-
</ul>
 
 +
<!--welcome box -->
 +
<tr> <td colspan="3"  height="5px"> </td></tr>
 +
<!-- end welcome box -->
 +
<tr>
-
</div>
+
<!--navigation menu -->
-
<div id="content">
+
<td align="center" colspan="3">
-
<div class="case">
+
-
<div id="slider" class="case_box">
+
-
<ul>
+
-
<li class="case_1">
+
-
<dl class="case_info">
+
-
<dd></dd>
+
-
</dl>
+
-
</li>
+
-
<li class="case_2">
+
-
<dl class="case_info">
+
-
<dd></dd>
+
-
</dl>
+
-
</li>
+
-
<li class="case_3">
+
-
<dl class="case_info">
+
-
<dd></dd>
+
-
</dl>
+
-
</li>
+
-
<li class="case_4">
+
-
<dl class="case_info">
+
-
<dd></dd>
+
-
</dl>
+
-
</li>
+
-
<li class="case_5">
+
-
<dl class="case_info">
+
-
<dd></dd>
+
-
</dl>
+
-
</li>
+
-
<li class="case_6">
+
-
<dl class="case_info case_info_add">
+
-
<dd></dd>
+
-
</dl>
+
-
</li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
<div id="others">
+
<table width="100%">
-
<div id="logo"><img src="https://static.igem.org/mediawiki/2014/6/6b/BIT_logo.png"></div>
+
<tr heigth="15px"></tr>
-
    <div id="address">
+
<tr heigth="75px">  
-
    <p>Beijing Institute of Technology | 5 South Zhongguancun Street, Haidian DistrictBeijing, China 100081</p>
+
-
        <p >E-mail: yifei0114@bit.edu.cn</p>
+
-
        <p >Beijing Institute of Technology © 2014 Privacy Policy</p>
+
-
    </div>
+
-
<div><img style="width:1024px"src="https://static.igem.org/mediawiki/2014/4/42/BIT_line1.png"></div>
+
-
</div>
+
-
</div>
+
-
<div id="footer">
+
-
<table id="table1"  >
+
-
        <tr >
+
-
        <td><img src="https://static.igem.org/mediawiki/2014/8/8d/BIT_Libraries_alt.png"><span>  blala</span></td>
+
-
            <td><img src="https://static.igem.org/mediawiki/2014/9/90/BIT_Downloads_Library.
+
-
png"><span>blala</span></td>
+
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
-
            <td><img src="https://static.igem.org/mediawiki/2014/1/19/BIT_Personal.png"><span>blala</span></td>
+
<a href="https://2014.igem.org/wiki/index.php?title=Team:BIT/Team_3&action=edit"style="color:#000000">点此开始编辑 </a> </td>
-
            <td><img src="https://static.igem.org/mediawiki/2014/2/22/BIT_Pictures.png"><span>blala</span></td>
+
-
        </tr>
+
-
        <tr  >
+
-
        <td>abubuvljvlugliuhjhlohhoinonion.hoinabubuvljvlugliuhjhlohhoinonion.hoinabubuvljvlugliuhjhl</td>
+
-
            <td>abubuvljvlugliuhjhlohhoinonion.hoinabubuvljvlugliuhjhlohhoinonion.hoinabubuvljvlugliuhjhl</td>
+
-
            <td>abubuvljvlugliuhjhlohhoinonion.hoinabubuvljvlugliuhjhlohhoinonion.hoinabubuvljvlugliuhjhl</td>
+
-
            <td>abubuvljvlugliuhjhlohhoinonion.hoinabubuvljvlugliuhjhlohhoinonion.hoinabubuvljvlugliuhjhl</td>
+
-
        </tr>
+
-
       
+
-
    </table>
+
-
</div>
+
-
</div>
 
-
<script type="text/javascript">
 
-
var Effect = (function() {
 
-
   
 
-
    var Slider = function(o) {
 
-
        this.setting      = typeof o === 'object' ? o : {};
 
-
        this.target      = this.setting.target || 'slider';
 
-
        this.showMarkers  = this.setting.showMarkers || false;
 
-
        this.showControls = this.setting.showControls || false;
 
-
        this.timer        = null;
 
-
        this.currentTime  = null;
 
-
        this.ms          = 35;
 
-
        this.autoMs      = 3000;
 
-
        this.iTarget      = 0;
 
-
        this.nextTarget  = 0;
 
-
        this.speed        = 0;
 
-
       
 
-
        this.init();
 
-
        this.handleEvent();
 
-
    };
 
-
   
 
-
    Slider.prototype = {
 
-
        init: function() {
 
-
            this.obj      = document.getElementById(this.target);
 
-
            this.oUl      = this.obj.getElementsByTagName('ul')[0];
 
-
            this.aUlLis  = this.oUl.getElementsByTagName('li');
 
-
            this.width    = this.aUlLis[0].offsetWidth;
 
-
            this.number  = this.aUlLis.length;
 
-
           
 
-
            this.oUl.style.width = this.width * this.number + 'px';
 
-
           
 
-
            if(this.showMarkers) {
 
-
                var oDiv = document.createElement('div');
 
-
                var aLis = [];
 
-
                for(var i = 0; i < this.number; i++) {
 
-
                    aLis.push('<li>'+ (i+1) +'<\/li>');
 
-
                };
 
-
                oDiv.innerHTML = '<ol>'+ aLis.join('') +'<\/ol>';
 
-
                this.obj.appendChild(oDiv.firstChild);
 
-
                this.aLis = this.obj.getElementsByTagName('ol')[0].getElementsByTagName('li');
 
-
                this.aLis[0].className = 'active';
 
-
                oDiv = null;
 
-
            };
 
-
           
 
-
            if(this.showControls) {
 
-
                this.oPrev = document.createElement('p');
 
-
                this.oNext = document.createElement('p');
 
-
                this.oPrev.className = 'prev';
 
-
                this.oPrev.innerHTML = '&laquo;';
 
-
                this.oNext.className = 'next';
 
-
                this.oNext.innerHTML = '&raquo;';
 
-
                this.obj.appendChild(this.oPrev);
 
-
                this.obj.appendChild(this.oNext);
 
-
               
 
-
            };
 
-
           
 
-
        },
 
-
       
 
-
        handleEvent: function() {
 
-
            var that = this;
 
-
           
 
-
            this.currentTime = setInterval(function() {
 
-
                that.autoPlay();
 
-
            }, this.autoMs);
 
-
           
 
-
            this.addEvent(this.obj, 'mouseover', function() {
 
-
                clearInterval(that.currentTime);
 
-
            });
 
-
           
 
-
            this.addEvent(this.obj, 'mouseout', function() {
 
-
                that.currentTime = setInterval(function() {
 
-
                    that.autoPlay();
 
-
                }, that.autoMs);
 
-
            });
 
-
           
 
-
            if(this.showMarkers) {
 
-
                for(var i = 0; i < this.number; i++) {
 
-
                    var el = this.aLis[i];
 
-
                    (function(index) {
 
-
                        that.addEvent(el, 'mouseover', function() {
 
-
                            that.goTime(index);
 
-
                        });
 
-
                    })(i);
 
-
                };
 
-
            };
 
-
           
 
-
            if(this.showControls) {
 
-
                this.addEvent(this.oPrev, 'click', function() {
 
-
                    that.fnPrev();
 
-
                });
 
-
                this.addEvent(this.oNext, 'click', function() {
 
-
                    that.autoPlay();
 
-
                });
 
-
            };
 
-
           
 
-
        },
 
-
       
 
-
        addEvent: function(el, type, fn) {
 
-
            if(window.addEventListener) {
 
-
                el.addEventListener(type, fn, false);
 
-
            }
 
-
            else if(window.attachEvent) {
 
-
                el.attachEvent('on' + type, fn);
 
-
            };
 
-
        },
 
-
       
 
-
        fnPrev: function() {
 
-
            this.nextTarget--;
 
-
            if(this.nextTarget < 0) {
 
-
                this.nextTarget = this.number - 1;
 
-
            };
 
-
            this.goTime(this.nextTarget);
 
-
        },
 
-
       
 
-
        autoPlay: function() {
 
-
            this.nextTarget++;
 
-
            if(this.nextTarget >= this.number) {
 
-
                this.nextTarget = 0;
 
-
            };
 
-
            this.goTime(this.nextTarget);
 
-
        },
 
-
       
 
-
        goTime: function(index) {
 
-
            var that = this;
 
-
           
 
-
            if(this.showMarkers) {
 
-
                for(var i = 0; i < this.number; i++) {
 
-
                    i == index ? this.aLis[i].className = 'active' : this.aLis[i].className = '';
 
-
                };
 
-
            };
 
-
           
 
-
            this.iTarget = -index * this.width;
 
-
            if(this.timer) {
 
-
                clearInterval(this.timer);
 
-
            };
 
-
            this.timer = setInterval(function() {
 
-
                that.doMove(that.iTarget);
 
-
            }, this.ms);
 
-
        },
 
-
       
 
-
        doMove: function(target) {
 
-
            this.oUl.style.left = this.speed + 'px';
 
-
            this.speed += (target - this.oUl.offsetLeft) / 3;
 
-
            if(Math.abs(target - this.oUl.offsetLeft) === 0) {
 
-
                this.oUl.style.left = target + 'px';
 
-
                clearInterval(this.timer);
 
-
                this.timer = null;
 
-
            };
 
-
        }
 
-
    };
+
</tr>
-
   
+
-
    return {
+
-
       
+
-
        slider: function(o) {
+
-
            var tt = new Slider(o);
+
-
        }
+
-
    };
+
-
})();
+
-
Effect.slider({
+
</table>
-
    'targetElement': 'slider',
+
-
    'showMarkers': true,
+
-
    'showControls': true
+
-
});</script>
+
-
</body>
+
-
</html>
+

Latest revision as of 06:47, 29 July 2014


点此开始编辑

Retrieved from "http://2014.igem.org/Team:BIT/Team_3"