Team:XMU-China/notebook

From 2014.igem.org

(Difference between revisions)
(Created page with "<html lang=“en” > <head> <title>Team:XMU-China</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="http://2014.igem...")
Line 71: Line 71:
    <p><img src="https://static.igem.org/mediawiki/2014/2/29/XMU-line.png" width="954" height="11" /></p>
    <p><img src="https://static.igem.org/mediawiki/2014/2/29/XMU-line.png" width="954" height="11" /></p>
     </div>
     </div>
 +
 +
<div id="caption">
 +
<p>Calendar(time)</p>
 +
</div>  
 +
 +
    <!--上方日历的特效-->
 +
<div id="group" style="position: relative">
 +
<img id="dna" src="css/images/dna.png" alt="DNA" width="666" height="656" style="position:absolute; left:150px" />
 +
<!--二月-->
 +
<div>
 +
  <div id="calendar1" class="calendar" style="background-image: url(css/images/calendar.gif);">
 +
<img src="css/images/prev_icon.png" class="prev" alt="Previous" style="position:absolute; top: 2px; cursor: pointer; " onclick="click_prev(this.parentNode)" />
 +
<img src="css/images/next_icon.png" class="next" alt="Next" style="position:absolute; left: 462px; top: 2px; cursor: pointer;" onclick="click_next(this.parentNode)" />
 +
<ul>February</ul>
 +
<h3>1st:Today we made love<br/>2nd:Today we made baby</h3>
 +
<img src="css/images/return.png" class="return" alt="Return" style="position:absolute; bottom:5px; left: 230px; cursor: pointer;" />
 +
  </div>
 +
  <div id="Month1" class="Month" style="position: absolute; top: 26px; left: 329px; cursor: pointer;" onclick="moveOut(this)"><h1>Feb</h1></div>
 +
</div>
 +
<!--三月-->
 +
<div>
 +
  <div id="calendar2" class="calendar" style="background-image: url(css/images/calendar.gif);" >
 +
<img src="css/images/prev_icon.png" class="prev" alt="Previous" style="position:absolute; top: 2px; cursor: pointer;"  onclick="click_prev(this.parentNode)"/>
 +
<img src="css/images/next_icon.png" class="next" alt="Next" style="position:absolute; left: 462px; top: 2px; cursor: pointer;" onclick="click_next(this.parentNode)"  />
 +
<ul>March</ul>
 +
<h3>1st:Today we made love<br/>2nd:Today we made baby</h3>
 +
<img src="css/images/return.png" class="return" alt="Return" style="position:absolute; bottom:5px; left: 230px; cursor: pointer;" />
 +
  </div>
 +
  <div id="Month2" class="Month"  style="position: absolute; top: 69px; left: 381px; cursor: pointer;" onclick="moveOut(this)"><h1>Mar</h1></div>
 +
</div>
 +
<!--四月-->
 +
<div>
 +
  <div id="calendar3" class="calendar" style="background-image: url(css/images/calendar.gif);" >
 +
<img src="css/images/prev_icon.png" class="prev" alt="Previous" style="position:absolute; top: 2px; cursor: pointer;" onclick="click_prev(this.parentNode)" />
 +
<img src="css/images/next_icon.png" class="next" alt="Next" style="position:absolute; left: 462px; top: 2px; cursor: pointer;" onclick="click_next(this.parentNode)"  />
 +
<ul>April</ul>
 +
<h3>1st:Today we made love<br/>2nd:Today we made baby</h3>
 +
<img src="css/images/return.png" class="return" alt="Return" style="position:absolute; bottom:5px; left: 230px; cursor: pointer;" />
 +
  </div>
 +
  <div id="Month3" class="Month"  style="position: absolute; top: 130px; left: 425px; cursor: pointer;" onclick="moveOut(this)"><h1>Apr</h1></div>
 +
</div>
 +
<!--五月-->
 +
<div>
 +
  <div id="calendar4" class="calendar" style="background-image: url(css/images/calendar.gif);">
 +
<img src="css/images/prev_icon.png" class="prev" alt="Previous" style="position:absolute; top: 2px; cursor: pointer;" onclick="click_prev(this.parentNode)"/>
 +
<img src="css/images/next_icon.png" class="next" alt="Next" style="position:absolute; left: 462px; top: 2px; cursor: pointer;" onclick="click_next(this.parentNode)"  />
 +
<ul>May</ul>
 +
<h3>1st:Today we made love<br/>2nd:Today we made baby</h3>
 +
<img src="css/images/return.png" class="return" alt="Return" style="position:absolute; bottom:5px; left: 230px; cursor: pointer;" />
 +
  </div>
 +
  <div id="Month4" class="Month"  style="position: absolute; top: 205px; left: 435px; cursor: pointer;" onclick="moveOut(this)"><h1>May</h1></div>
 +
</div>
 +
<!--六月-->
 +
<div>
 +
  <div id="calendar5" class="calendar" style="background-image: url(css/images/calendar.gif);" >
 +
<img src="css/images/prev_icon.png" class="prev" alt="Previous" style="position:absolute; top: 2px; cursor: pointer;" onclick="click_prev(this.parentNode)" />
 +
<img src="css/images/next_icon.png" class="next" alt="Next" style="position:absolute; left: 462px; top: 2px; cursor: pointer;" onclick="click_next(this.parentNode)"  />
 +
<ul>June</ul>
 +
<h3>1st:Today we made love<br/>2nd:Today we made baby</h3>
 +
<img src="css/images/return.png" class="return" alt="Return" style="position:absolute; bottom:5px; left: 230px; cursor: pointer;" />
 +
 +
  </div>
 +
  <div id="Month5" class="Month"  style="position: absolute; top: 334px; left: 352px; cursor: pointer;" onclick="moveOut(this)"><h1>Jun</h1></div>
 +
</div>
 +
<!--七月-->
 +
<div>
 +
  <div id="calendar6" class="calendar" style="background-image: url(css/images/calendar.gif);" >
 +
<img src="css/images/prev_icon.png" class="prev" alt="Previous" style="position:absolute; top: 2px; cursor: pointer;" onclick="click_prev(this.parentNode)" />
 +
<img src="css/images/next_icon.png" class="next" alt="Next" style="position:absolute; left: 462px; top: 2px; cursor: pointer;" onclick="click_next(this.parentNode)"  />
 +
<ul>July</ul>
 +
<h3>1st:Today we made love<br/>2nd:Today we made baby</h3>
 +
<img src="css/images/return.png" class="return" alt="Return" style="position:absolute; bottom:5px; left: 230px; cursor: pointer;" />
 +
  </div>
 +
  <div id="Month6" class="Month"  style="position: absolute; top: 414px; left: 387px; cursor: pointer;" onclick="moveOut(this)"><h1>Jul</h1></div>
 +
</div>
 +
<!--八月-->
 +
<div>
 +
  <div id="calendar7" class="calendar" style="background-image: url(css/images/calendar.gif);" >
 +
<img src="css/images/prev_icon.png" class="prev" alt="Previous" style="position:absolute; top: 2px; cursor: pointer;" onclick="click_prev(this.parentNode)" />
 +
<img src="css/images/next_icon.png" class="next" alt="Next" style="position:absolute; left: 462px; top: 2px; cursor: pointer;" onclick="click_next(this.parentNode)"  />
 +
<ul>August</ul>
 +
<h3>1st:Today we made love<br/>2nd:Today we made baby</h3>
 +
<img src="css/images/return.png" class="return" alt="Return" style="position:absolute; bottom:5px; left: 230px; cursor: pointer;" />
 +
  </div>
 +
  <div id="Month7" class="Month"  style="position: absolute; top: 456px; left: 428px; cursor: pointer;" onclick="moveOut(this)"><h1>Aug</h1></div>
 +
</div>
 +
<!--九月-->
 +
<div>
 +
  <div id="calendar8" class="calendar" style="background-image: url(css/images/calendar.gif);" >
 +
<img src="css/images/prev_icon.png" class="prev" alt="Previous" style="position:absolute; top: 2px; cursor: pointer;" onclick="click_prev(this.parentNode)" />
 +
<img src="css/images/next_icon.png" class="next" alt="Next" style="position:absolute; left: 462px; top: 2px; cursor: pointer;" onclick="click_next(this.parentNode)"  />
 +
<ul>September</ul>
 +
<h3>1st:Today we made love<br/>2nd:Today we made baby</h3>
 +
<img src="css/images/return.png" class="return" alt="Return" style="position:absolute; bottom:5px; left: 230px; cursor: pointer;" />
 +
  </div>
 +
  <div id="Month8" class="Month"  style="position: absolute; top: 465px; left: 630px; cursor: pointer;" onclick="moveOut(this)"><h1>Sep</h1></div>
 +
</div>
 +
<!--十月-->
 +
<div>
 +
  <div id="calendar9" class="calendar" style="background-image: url(css/images/calendar.gif);" >
 +
<img src="css/images/prev_icon.png" class="prev" alt="Previous" style="position:absolute; top: 2px; cursor: pointer;" onclick="click_prev(this.parentNode)" />
 +
<img src="css/images/next_icon.png" class="next" alt="Next" style="position:absolute; left: 462px; top: 2px; cursor: pointer;" onclick="click_next(this.parentNode)"  />
 +
<ul>October</ul>
 +
<h3>1st:Today we made love<br/>2nd:Today we made baby</h3>
 +
<img src="css/images/return.png" class="return" alt="Return" style="position:absolute; bottom:5px; left: 230px; cursor: pointer;" />
 +
 +
  </div>
 +
  <div id="Month9" class="Month"  style="position: absolute; top: 512px; left: 718px; cursor: pointer;" onclick="moveOut(this)"><h1>Oct</h1></div>
 +
</div>
 +
</div>
 +
 
 +
    <!--鼠标移动到月份数字上的效果-->
 +
<style>
 +
#dna {    
 +
transition: all 0.2s linear;
 +
-ms-transition: all 0.2s linear;
 +
-moz-transition: all 0.2s linear; /* Firefox 4 */
 +
-webkit-transition: all 0.2s linear; /* Safari and Chrome */
 +
-o-transition: all 0.2s linear; /* Opera */
 +
 +
}
 +
.Month:hover{
 +
transform: rotate(-30deg);
 +
-ms-transform: rotate(-30deg);
 +
-moz-transform: rotate(-30deg); /* Firefox 4 */
 +
-webkit-transform: rotate(-30deg); /* Safari and Chrome */
 +
-o-transform: rotate(-30deg); /* Opera */  
 +
}
 +
</style>
 +
 
 +
 
 +
<!--点击月份，DNA跳转至右侧+文字消失+月历弹出-->
 +
  <script type="text/javascript">
 +
$(".calendar").hide();
 +
function moveOut(obj) {
 +
  $("#dna").css({"width":"500px","height":"500px"});
 +
  var moveout = document.getElementById("dna");
 +
  moveout.style.transform = "rotate(38deg)";
 +
  moveout.style.webkitTransform = "rotate(38deg)";
 +
  $("#dna").animate({left:'600px'},"fast");
 +
  $(".Month").fadeOut("fast");
 +
  var id = obj.id;
 +
  var bro = "#calendar"+id.substring(5);
 +
  $(bro).show(800);
 +
  }
 +
  </script>
 +
 
 +
 
 +
<!--点击前进/后退按钮，月历跳转-->
 +
  <script type="text/javascript">
 +
function click_next(obj){ 
 +
  var id = obj.id;                    //获取obj对象的id
 +
  var curIndex = id.slice(8);          //去掉该id中占据前8个字符的”calendar“，得到数字
 +
  if(curIndex==9) return; 
 +
  $("#calendar"+curIndex).fadeOut();
 +
  curIndex++;                          //每次点击时加1
 +
  $("#calendar"+curIndex).fadeIn();
 +
}
 +
 +
function click_prev(obj){
 +
  var id = obj.id;
 +
  var curIndex = id.slice(8);
 +
  if(curIndex==1) return;
 +
  $("#calendar"+curIndex).fadeOut();
 +
  curIndex--;                        //每次点击时减1
 +
  $("#calendar"+curIndex).fadeIn();
 +
}
 +
 +
  </script>
 +
 
 +
 
 +
<!--点击返回到原页面-->
 +
  <script type="text/javascript">
 +
$(document).ready(function() {
 +
  $(".return").click(function(){
 +
  $(".calendar").hide();
 +
  var movein = document.getElementById("dna");
 +
  movein.style.transform = "rotate(0deg)";
 +
  movein.style.webkitTransform = "rotate(0deg)";
 +
  $("#dna").animate({left:'150px'},"fast");
 +
  $("#dna").css({"width":"666px","height":"656px"});
 +
  $(".Month").fadeIn(1500);  
 +
  });
 +
});
 +
 +
  </script>
 +
 +
<div class="shadow-l"><img src="css/images/shadow-l.png" /></div>
 +
<div class="shadow-r"><img src="css/images/shadow-r.png" /></div>
 +
<div class="shadow-b"><img src="css/images/shadow-b.png" /></div>

Revision as of 15:55, 1 October 2014

Team:XMU-China

Calendar(time)

DNA
Previous Next
    February

1st:Today we made love
2nd:Today we made baby

Return

Feb

Previous Next
    March

1st:Today we made love
2nd:Today we made baby

Return

Mar

Previous Next
    April

1st:Today we made love
2nd:Today we made baby

Return

Apr

Previous Next
    May

1st:Today we made love
2nd:Today we made baby

Return

May

Previous Next
    June

1st:Today we made love
2nd:Today we made baby

Return

Jun

Previous Next
    July

1st:Today we made love
2nd:Today we made baby

Return

Jul

Previous Next
    August

1st:Today we made love
2nd:Today we made baby

Return

Aug

Previous Next
    September

1st:Today we made love
2nd:Today we made baby

Return

Sep

Previous Next
    October

1st:Today we made love
2nd:Today we made baby

Return

Oct

Retrieved from "http://2014.igem.org/Team:XMU-China/notebook"