Difference between revisions of "Team:NCTU Formosa/Practices"

Line 140: Line 140:
 
top:175vh;
 
top:175vh;
 
}
 
}
 +
ul, li {
 +
margin: 0;
 +
padding: 0;
 +
list-style: none;
 +
}
 +
.slideshow {
 +
position: relative;
 +
height: 160px;
 +
width: 210px;
 +
float: left;
 +
margin: 0 10px;
 +
border: 3px solid #ddd;
 +
}
 +
.slideshow li {
 +
position: absolute;
 +
}
 +
.slideshow a img{
 +
display: block;
 +
padding: 0;
 +
margin: 0 auto;
 +
border: none;
 +
}
 +
.slideshow li a{
 +
display: block;
 +
}
 +
.slideshowController {
 +
position: absolute;
 +
right: 0;
 +
bottom: 0;
 +
}
 +
.slideshowController a {
 +
background: transparent url(images/arrows.png) no-repeat left top;
 +
display: block;
 +
width: 30px;
 +
height: 30px;
 +
position: absolute;
 +
right: 60px;
 +
bottom: 0;
 +
z-index: 9999;
 +
outline: none; /* 去除超連結虛線 */
 +
}
 +
.slideshowController .next{
 +
background-position: -30px 0;
 +
right: 0;
 +
}
 +
.slideshowController .play{
 +
background-position: -60px 0;
 +
right: 30px;
 +
}
 +
.slideshowController .pause{
 +
background-position: -90px 0;
 +
}
 
</style>
 
</style>
 +
<script type="text/javascript">
 +
    $(function(){
 +
// 預設圖片淡出淡入的動畫時間
 +
var _fadeSpeed = 600;
 +
 +
// 把每一個 .slideshow 取出來做處理
 +
$('.slideshow').each(function(){
 +
// 先取得相關的 ul , li
 +
// 並產生控制器
 +
var $this = $(this),
 +
$ul = $this.find('ul'),
 +
$li = $ul.find('li'),
 +
$controller = $('<div class="slideshowController"><a href="#"></a><a href="#" class="play"></a><a href="#" class="next"></a></div>').css('opacity', 0),
 +
_len = $li.length,
 +
_index = 0, timer, _speed = 2000;
 +
 +
// 先把第一張圖片之外的都透明度設成 0
 +
$li.eq(_index).css('z-index', 2).siblings().css('opacity', 0);
 +
 +
// 加入控制器並當滑鼠移入時顯示; 滑鼠移出時隱藏
 +
$this.append($controller).hover(function(){
 +
$controller.stop().animate({
 +
opacity: 1
 +
});
 +
}, function(){
 +
$controller.stop().animate({
 +
opacity: 0
 +
});
 +
});
 +
 +
// 當點擊到控制器上面的按鈕時
 +
$controller.delegate('a', 'click', function(){
 +
// 先取得按鈕的 class
 +
var $a = $(this),
 +
_className = $a.attr('class');
 +
 +
// 如果按的是 play 或是 pause 鈕
 +
if(('play pause').indexOf(_className) > -1){
 +
// 切換目前按鈕圖案
 +
// 並依狀態來啟動或停止計時器
 +
$a.toggleClass('pause').hasClass('pause') ? timer = setTimeout(autoClickNext, _fadeSpeed + _speed) : clearTimeout(timer);
 +
return false;
 +
}
 +
 +
// 停止計時器
 +
clearTimeout(timer);
 +
// 移除 pause 鈕
 +
$a.siblings('.pause').removeClass('pause');
 +
// 依按鈕功能來決定上下張圖片索引
 +
_index = ('next' == _className ? _index + 1 : _index - 1 + _len) % _len;
 +
// 切換圖片
 +
show();
 +
 +
return false;
 +
});
 +
 +
// 自動播放下一張
 +
function autoClickNext() {
 +
_index = (_index + 1) % _len;
 +
show();
 +
timer = setTimeout(autoClickNext, _fadeSpeed + _speed);
 +
}
 +
 +
// 淡入淡出圖片
 +
function show() {
 +
$li.eq(_index).animate({
 +
opacity: 1,
 +
zIndex: 2
 +
}, _fadeSpeed).siblings(':visible').animate({
 +
opacity: 0,
 +
zIndex: 1
 +
}, _fadeSpeed);
 +
}
 +
// 如果有設定預設自動播放的話
 +
if($this.hasClass('autoPlay')){
 +
$controller.find('.play').click();
 +
}
 +
});
 +
});
 +
    </script>
 
</head>
 
</head>
 
<body>
 
<body>
Line 158: Line 290:
 
<div class="icon3"></div>
 
<div class="icon3"></div>
 
<div class="iconcon3"> About Project </div>
 
<div class="iconcon3"> About Project </div>
 +
<div class="slideshow autoPlay">
 +
<ul>
 +
<li>
 +
<a href="#">
 +
<img src="https://static.igem.org/mediawiki/2015/a/a4/NCTU_Formosa_hp_newsletter.png" title="" alt="" />
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<img src="https://static.igem.org/mediawiki/2015/0/09/NCTU_FORMOSA_HP_asian.png" title="" alt="" />
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<img src="https://static.igem.org/mediawiki/2015/c/c3/NCTU_FORMOSA_HP_biocamp.png" title="" alt="" />
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<img src="" title="" alt="" />
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 05:46, 2 September 2015

Team exchange
1. Host iGEM Asia Meetup : 27teams 210 participants
2. Skype Meetups :
KAIT_ Japan, Amoy_ China, TU Delft, and Oxford
3. Host mini conference for iGEM high school team : Mingdao & HSNU
4. Conference with iGEMers and Professors
1.Edcationaly:
Lecture iGEM and Sythentic Biology in Biocamp
2. Legally:
Inqure Science and Tech Law expert with patent
3. Clinically:
Visit Cancer Doctor and Recovered Patient
iGEM, Sythentic Biology and Project Promoting
1. Took part in Amoy Newsletter
2. Experince side effect of chemotherapy- Bald
3. Donation Program: ONE PENY ONE CARE
About Project