Team:NCTU Formosa/source/header-project

From 2014.igem.org

(Difference between revisions)
 
(92 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<style>
<style>
 +
.ch-item {
 +
    width: 100%;
 +
    height: 100%;
 +
    border-radius: 50%;
 +
    position: relative;
 +
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 +
    cursor: default;
 +
}
 +
.ch-info-wrap,
 +
.ch-info{
 +
    position: absolute;
 +
    width: 180px;
 +
    height: 180px;
 +
    border-radius: 50%;
 +
}
 +
.ch-info-wrap {
 +
    top: 20px;
 +
    left: 20px;
 +
    background: #f9f9f9 url(../images/bg.jpg);
 +
    box-shadow:
 +
        0 0 0 20px rgba(255,255,255,0.2),
 +
        inset 0 0 3px rgba(115,114, 23, 0.8);
 +
 +
}
 +
.ch-info > div {
 +
    display: block;
 +
    position: absolute;
 +
    width: 100%;
 +
    height: 100%;
 +
    border-radius: 50%;
 +
    background-position: center center;
 +
}
 +
.ch-info .ch-info-front {
 +
    transition: all 0.6s ease-in-out;
 +
}
 +
.ch-info .ch-info-back {
 +
    opacity: 0;
 +
    background: #223e87;
 +
    pointer-events: none;
 +
    transform: scale(1.5);
 +
    transition: all 0.4s ease-in-out 0.2s;
 +
}
 +
.ch-item:hover .ch-info-front {
 +
    transform: scale(0);
 +
    opacity: 0;
 +
}
 +
.ch-img-1 {
 +
background-image: url('https://static.igem.org/mediawiki/2014/8/8d/2014_NCTU_Formosa_Moth_Mamestra_brassicae.jpg');
 +
background-size: 130pt auto;
 +
}
 +
 +
.ch-img-2 {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/d/d7/2014_NCTU_Formosa_Moth_Helicoverpa-armigera.jpg');
 +
background-size: 130pt auto;
 +
}
 +
 +
.ch-img-3 {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/4/45/2014_NCTU_Formosa_Moth_Spodoptera_litura.jpg');
 +
background-size: 130pt auto;
 +
}
 +
 +
.ch-img-4 {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/b/b5/2014_NCTU_Formosa_Moth_Solenopsis_invicta.jpg');
 +
background-size: 130pt auto;
 +
}
 +
 +
.ch-img-5 {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/3/3e/2014_NCTU_Formosa_Moth_Mosquito.jpg');
 +
background-size: 170pt auto;
 +
}
 +
 +
.ch-img-6 {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/a/a3/2014_NCTU_Formosa_Moth_Agrotis_ipsilon.jpg');
 +
background-size: 130pt auto;
 +
}
 +
 +
.ch-img-7 {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/8/88/2014_NCTU_Formosa_Moth_Lymantria_dispar.jpg');
 +
background-size: 130pt auto;
 +
}
 +
.ch-img-8 {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/0/0e/2014_NCTU_Formosa_Moth_Adoxophyes_sp1.jpg');
 +
background-size: 127pt auto;
 +
}
 +
.ch-img-9 {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/3/3a/2014_NCTU_Formosa_Moth_Bombyx_mori.jpg');
 +
background-size: 130pt auto;
 +
}
 +
 +
 +
.ch-info h3 {
 +
    color: #fff;
 +
    text-transform: uppercase;
 +
    letter-spacing: 2px;
 +
    font-size: 18px;
 +
    margin: 0 15px;
 +
    padding: 40px 0 0 0;
 +
    height: 80px;
 +
    font-family: 'Open Sans', Arial, sans-serif;
 +
    text-shadow:
 +
        0 0 1px #fff,
 +
        0 1px 2px rgba(0,0,0,0.3);
 +
}
 +
 +
.ch-info p {
 +
    color: #fff;
 +
    padding: 10px 5px 0;
 +
    font-style: italic;
 +
    margin: 0 30px;
 +
    font-size: 12px;
 +
    border-top: 1px solid rgba(255,255,255,0.5);
 +
}
 +
 +
.ch-info p a {
 +
    display: block;
 +
    color: #e7615e;
 +
    font-style: normal;
 +
    font-weight: 700;
 +
    text-transform: uppercase;
 +
    font-size: 9px;
 +
    letter-spacing: 1px;
 +
    padding-top: 4px;
 +
    font-family: 'Open Sans', Arial, sans-serif;
 +
}
 +
 +
.ch-info p a:hover {
 +
    color: #fff;
 +
}
 +
.ch-item:hover .ch-info-back {
 +
    transform: scale(1);
 +
    opacity: 1;
 +
    pointer-events: auto;
 +
}
 +
</style>
 +
<style>
 +
.right{
 +
width:65%;
 +
float:right;
 +
}
 +
.left{
 +
width:30%;
 +
float:left;
 +
}
 +
.right2{
 +
width:30%;
 +
float:right;
 +
display:block;
 +
}
 +
.left2,.left2in{
 +
width:65%;
 +
float:left;
 +
display:block;
 +
}
 +
.right2in{
 +
width:30%;
 +
float:right;
 +
display:block;
 +
height:500pt;
 +
overflow:scroll;
 +
}
.effect {
.effect {
  left: 6.25%;
  left: 6.25%;
Line 10: Line 170:
display:none;
display:none;
}
}
-
 
+
.center{
-
.bigtxt{
+
left: 10%;
 +
}
 +
.pban li{
 +
border-radius: 3px;
 +
text-align: center;
 +
font-weight: 700;
 +
width: 33%;
 +
padding:0;
 +
margin:0;
 +
border:0;
 +
display: block;
 +
float: left;
 +
height: 220px;
 +
vertical-align: middle;
 +
}
 +
.slopetxt{
font-size: 130%;
font-size: 130%;
font-style:italic;
font-style:italic;
-
 
+
}
 +
.bigtxt{
 +
font-size: 130%;
 +
font-weight:bolder;
}
}
 +
.smalltxt{
 +
font-size:x-small;
 +
font-style:italic;
 +
}
.BOX{
.BOX{
width :  90%;
width :  90%;
Line 35: Line 217:
margin-right: 200em;  
margin-right: 200em;  
}
}
-
.move {
+
</style>
-
background-image: url('https://static.igem.org/mediawiki/2014/0/06/NCTU2014logo.png');
+
 
 +
 
 +
<style type="text/css">
 +
.flex-container a:active,
 +
.flexslider a:active,
 +
.flex-container a:focus,
 +
.flexslider a:focus{
 +
outline:none;
}
}
-
#PBANblock{
+
.slides,
 +
.flex-control-nav,
 +
.flex-direction-nav{
 +
margin:0;
 +
padding:0;
 +
list-style:none;
}
}
-
#abgne-block-20120327 {
+
.flexslider{
-
width: 640px;
+
margin:0;
-
margin:0px auto
+
padding:0;
}
}
-
#abgne-block-20120327 ul, #abgne-block-20120327 li {
+
.flexslider .slides > li{
-
list-style: none;
+
display:none;
-
margin: 0;
+
-webkit-backface-visibility:hidden;
-
padding: 0;
+
-moz-backface-visibility:hidden;
 +
-ms-backface-visibility:hidden;
 +
-o-backface-visibility:hidden;
 +
backface-visibility:hidden;
}
}
-
#abgne-block-20120327 .tabs li {
+
.flexslider .slides img{
-
float: left;
+
width:100%;
-
margin: 0 0 -1px 5px;
+
display:block;
-
border: 1px solid #ddd;
+
-
background: #fafafa;
+
-
height: 32px;
+
-
cursor: pointer;
+
-
border-radius: 5px 5px 0 0;
+
}
}
-
#abgne-block-20120327 .tabs li.active {
+
.flex-pauseplay span{
-
background: #fff;
+
text-transform:capitalize;
-
padding-bottom: 1px;
+
-
border-bottom: none;
+
}
}
-
#abgne-block-20120327 .tabs li.hover{
+
.flexslider a.intro {
-
background: #f5f5f5;  
+
bottom:0;
 +
color:rgba(0, 0, 0, 0.1);
 +
font-size:14px;
 +
position:absolute;
 +
right:0;
 +
text-decoration:none;
 +
z-index:99999;
}
}
-
#abgne-block-20120327 .tabs span {
+
.slides:after{
-
display: block;
+
content:".";
-
float: left;
+
display:block;
-
overflow: hidden;
+
clear:both;
-
padding: 7px 15px 5px 15px;
+
visibility:hidden;
 +
line-height:0;
 +
height:0;
}
}
-
#abgne-block-20120327 .tab_container {
+
html[xmlns] .slides{
-
clear: both;
+
display:block;
-
border: 1px solid #DDD;
+
-
background: #fff;
+
-
overflow: hidden;
+
-
border-radius: 5px;
+
}
}
-
#abgne-block-20120327 .tab_container ul {
+
* html .slides{
-
position: relative;
+
height:1%;
-
height: 320px;
+
-
overflow: hidden;
+
}
}
-
#abgne-block-20120327 .tab_container .tab_content li {
+
.no-js .slides > li:first-child{
-
position: absolute;
+
display:block;
-
width: 610px;
+
-
height: 100%;
+
-
padding: 15px;
+
-
margin-top: 10px;
+
-
background: #fff;
+
}
}
-
#abgne-block-20120327 .tab_container .tab_content li img {
+
 
-
display: block;
+
.flexslider{
-
float: left;
+
margin:0 0 60px;
-
margin-right: 15px;
+
background:#fff;
 +
border:4px solid #fff;
 +
position:relative;
 +
-webkit-border-radius:4px;
 +
-moz-border-radius:4px;
 +
border-radius:4px;
 +
-webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);
 +
-moz-box-shadow:0 1px 4px rgba(0,0,0,.2);
 +
box-shadow:0 1px 4px rgba(0,0,0,.2);
 +
zoom:1;
}
}
-
#abgne-block-20120327 .tab_container .tab_content li .tab_title {
+
.flex-viewport{
-
font-size: 22px;
+
max-height:2000px;
-
line-height: 22px;
+
-webkit-transition:all 1s ease;
-
margin: 5px 0 15px;
+
-moz-transition:all 1s ease;
 +
-o-transition:all 1s ease;
 +
transition:all 1s ease;
 +
}
 +
.loading .flex-viewport{
 +
max-height:300px;
 +
}
 +
.flexslider .slides{
 +
zoom:1;
 +
}
 +
.carousel li{
 +
margin-right:5px;
 +
}
 +
.flexslider li {
 +
border: 0 none !important;
 +
padding: 0 !important;
 +
text-indent: 0 !important;
 +
}
 +
.flex-direction-nav a{
 +
width:30px;
 +
height:30px;
 +
margin:-20px 0 0;
 +
display:block;
 +
background:url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
 +
position:absolute;
 +
top:50%;
 +
cursor:pointer;
 +
text-indent:-9999px;
 +
opacity:0;
 +
-webkit-transition:all .3s ease;
 +
-moz-transition:all .3s ease;
 +
-o-transition:all .3s ease;
 +
transition:all .3s ease;
 +
}
 +
.flex-direction-nav .flex-next{
 +
background-position:100% 0;
 +
right:-36px;
 +
}
 +
.flex-direction-nav .flex-prev{
 +
left:-36px;
 +
}
 +
.flexslider:hover .flex-next{
 +
opacity:0.8;
 +
right:5px;
 +
}
 +
.flexslider:hover .flex-prev{
 +
opacity:0.8;
 +
left:5px;
 +
}
 +
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{
 +
opacity:1;
 +
}
 +
.flex-direction-nav .disabled{
 +
opacity:.3!important;
 +
filter:alpha(opacity=30);
 +
cursor:default;
 +
}
 +
.flex-control-nav{
 +
width:100%;
 +
position:absolute;
 +
bottom:-40px;
 +
text-align:center;
 +
}
 +
.flex-control-nav li{
 +
margin:0 6px;
 +
display:inline-block;
 +
zoom:1;
 +
*display:inline;
 +
}
 +
.flex-control-paging li a{
 +
width:11px;
 +
height:11px;
 +
display:block;
 +
background:#666;
 +
background:rgba(0,0,0,0.5);
 +
cursor:pointer;
 +
text-indent:-9999px;
 +
-webkit-border-radius:20px;
 +
-moz-border-radius:20px;
 +
border-radius:20px;
 +
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
 +
-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
 +
box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
 +
}
 +
.flex-control-paging li a:hover{
 +
background:#333;
 +
background:rgba(0,0,0,0.7);
 +
}
 +
.flex-control-paging li a.flex-active{
 +
background:#000;
 +
background:rgba(0,0,0,0.9);
 +
cursor:default;
 +
}
 +
.flex-control-thumbs{
 +
margin:5px 0 0;
 +
position:static;
 +
overflow:hidden;
 +
}
 +
.flex-control-thumbs li{
 +
width:25%;
 +
float:left;
 +
margin:0;
 +
}
 +
.flex-control-thumbs img{
 +
width:100%;
 +
display:block;
 +
opacity:.7;
 +
cursor:pointer;
 +
}
 +
.flex-control-thumbs img:hover{
 +
opacity:1;
 +
}
 +
.flex-control-thumbs .active{
 +
opacity:1;
 +
cursor:default;
}
}
</style>
</style>
 +
 +
 +
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
 +
<script type="text/javascript">
 +
$(document).ready(function(){ 
 +
$(window).load(function() {
 +
  $('.flexslider').flexslider({
 +
    animation: "slide",
 +
    animationLoop: false,
 +
    itemWidth: 210,
 +
    itemMargin: 0,
 +
    minItems: 1,
 +
    maxItems: 1
 +
  });
 +
});
 +
});
 +
</script>
 +
 +
 +
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
 +
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
 +
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
<script>
-
$(function(){
+
$(function() {
-
// 預設顯示第一個頁籤
+
$( ".doo111" ).dialog({
-
// 並先把 .tabs, .tabs li 及 .tab_content, .tab_content li 等元素取出
+
autoOpen: false,
-
// 同時也要取得 .tab_content 的寬
+
show: {
-
var _default = 0,
+
effect: "blind",
-
$block = $('#abgne-block-20120327'),
+
duration: 1000
-
$tabs = $block.find('.tabs'),
+
},
-
$tabsLi = $tabs.find('li'),
+
hide: {
-
$tab_content = $block.find('.tab_content'),  
+
effect: "explode",
-
$tab_contentLi = $tab_content.find('li'),
+
duration: 1000
-
_width = $tab_content.width();
+
}
-
+
-
// 當滑鼠移到 .tabs li 上時要套用 .hover 樣式
+
-
// 移出時要移除 .hover 樣式
+
-
$tabsLi.hover(function(){
+
-
var $this = $(this);
+
-
+
-
// 若被滑鼠移上去的 li 是目前顯示的頁籤就不做任何動作
+
-
if($this.hasClass('active')) return;
+
-
+
-
$this.toggleClass('hover');
+
-
}).click(function(){ // 當滑鼠點擊 .tabs li 時
+
-
// 先取出被點擊及目前顯示的頁籤與索引
+
-
var $active = $tabsLi.filter('.active').removeClass('active'),  
+
-
_activeIndex = $active.index(), 
+
-
$this = $(this).addClass('active').removeClass('hover'),
+
-
_index = $this.index(),
+
-
isNext = _index > _activeIndex;
+
-
+
-
// 如果被點擊的頁籤就是目前已顯示的頁籤, 則不做任何動作
+
-
if(_activeIndex == _index) return;
+
-
+
-
// 依索引大或小來決定移動的位置
+
-
$tab_contentLi.eq(_activeIndex).stop().animate({
+
-
left: isNext ? -_width : _width
+
-
}).end().eq(_index).css('left', isNext ? _width : -_width).stop().animate({
+
-
left: 0
+
-
});
+
-
});
+
-
+
-
// 先把預設要顯示的頁籤加上 .active 樣式及顯示相對應的內容
+
-
$tabsLi.eq(_default).addClass('active');
+
-
$tab_contentLi.eq(_default).siblings().css({
+
-
left: _width
+
-
});
+
});
});
-
$(document).ready(function(){
+
$( "#move111" ).click(function() {
-
$('a.image').click(function() { return false; });
+
$( ".doo111" ).dialog( "open" );
-
$('img').each(function(){ $(this).removeAttr('height');$(this).removeAttr('width'); });
+
});
 +
});
 +
</script>
 +
<script>
 +
$(function() {
 +
$( ".doo11" ).dialog({
 +
autoOpen: false,
 +
show: {
 +
effect: "blind",
 +
duration: 1000
 +
},
 +
hide: {
 +
effect: "explode",
 +
duration: 1000
 +
}
 +
,width:800
 +
});
 +
$( "#move11" ).click(function() {
 +
$( ".doo11" ).dialog( "open" );
 +
});
 +
});
 +
</script>
 +
 
 +
<script>
 +
$(function() {
 +
$( ".doo22" ).dialog({
 +
autoOpen: false,
 +
show: {
 +
effect: "blind",
 +
duration: 1000
 +
},
 +
hide: {
 +
effect: "explode",
 +
duration: 1000
 +
}
 +
,width:800
 +
 
 +
});
 +
$( "#move22" ).click(function() {
 +
$( ".doo22" ).dialog( "open" );
 +
});
 +
});
 +
</script>
 +
 
 +
<script>
 +
$(function() {
 +
$( ".doo33" ).dialog({
 +
autoOpen: false,
 +
show: {
 +
effect: "blind",
 +
duration: 1000
 +
},
 +
hide: {
 +
effect: "explode",
 +
duration: 1000
 +
}
 +
,width:800
 +
 
 +
});
 +
$( "#move33" ).click(function() {
 +
$( ".doo33" ).dialog( "open" );
 +
});
 +
});
 +
</script>
 +
 
 +
<script>
 +
$(function() {
 +
$( ".doo44" ).dialog({
 +
autoOpen: false,
 +
show: {
 +
effect: "blind",
 +
duration: 1000
 +
},
 +
hide: {
 +
effect: "explode",
 +
duration: 1000
 +
}
 +
,width:800
 +
 
 +
});
 +
$( "#move44" ).click(function() {
 +
$( ".doo44" ).dialog( "open" );
 +
});
 +
});
 +
</script>
 +
 
 +
<script>
 +
$(function() {
 +
$( ".doo55" ).dialog({
 +
autoOpen: false,
 +
show: {
 +
effect: "blind",
 +
duration: 1000
 +
},
 +
hide: {
 +
effect: "explode",
 +
duration: 1000
 +
}
 +
,width:800
 +
 
 +
});
 +
$( "#move55" ).click(function() {
 +
$( ".doo55" ).dialog( "open" );
 +
});
 +
});
 +
</script>
 +
<script>
 +
$(function() {
 +
$( ".doo66" ).dialog({
 +
autoOpen: false,
 +
show: {
 +
effect: "blind",
 +
duration: 1000
 +
},
 +
hide: {
 +
effect: "explode",
 +
duration: 1000
 +
}
 +
,width:800
 +
 
 +
});
 +
$( "#move66" ).click(function() {
 +
$( ".doo66" ).dialog( "open" );
 +
});
 +
});
 +
</script>
 +
<script>
 +
$(function() {
 +
$( ".doo77" ).dialog({
 +
autoOpen: false,
 +
show: {
 +
effect: "blind",
 +
duration: 1000
 +
},
 +
hide: {
 +
effect: "explode",
 +
duration: 1000
 +
}
 +
,width:800
 +
 
 +
});
 +
$( "#move77" ).click(function() {
 +
$( ".doo77" ).dialog( "open" );
 +
});
 +
});
 +
</script>
 +
<script>
 +
$(function() {
 +
$( ".doo88" ).dialog({
 +
autoOpen: false,
 +
show: {
 +
effect: "blind",
 +
duration: 1000
 +
},
 +
hide: {
 +
effect: "explode",
 +
duration: 1000
 +
}
 +
,width:800
 +
 
 +
});
 +
$( "#move88" ).click(function() {
 +
$( ".doo88" ).dialog( "open" );
 +
});
 +
});
 +
</script>
 +
<script>
 +
 
 +
$(function() {
 +
$( ".doo99" ).dialog({
 +
autoOpen: false,
 +
show: {
 +
effect: "blind",
 +
duration: 750
 +
},
 +
hide: {
 +
effect: "explode",
 +
duration: 750
 +
},
 +
width:800
 +
});
 +
$( "#move99" ).click(function() {
 +
$( ".doo99" ).dialog( "open" );
});
});
-
//PBAB縮放顯示
 
-
$(document).ready(function(){
 
-
$(".doo1").hide() ;
 
-
$(".doo2").hide() ;
 
-
$(".doo3").hide() ;
 
-
$(".doo4").hide() ;
 
-
$(".doo5").hide() ;
 
-
$(".doo6").hide() ;
 
-
$(".doo7").hide() ;
 
-
$(".doo8").hide() ;
 
-
$(".doo9").hide() ;
 
-
  $("#move1").click(function(){
 
-
  $(".doo1").toggle(500);
 
-
  });
 
-
  $("#move2").click(function(){
 
-
  $(".doo2").toggle(500);
 
-
  });
 
-
  $("#move3").click(function(){
 
-
  $(".doo3").toggle(500);
 
-
  });
 
-
  $("#move4").click(function(){
 
-
  $(".doo4").toggle(500);
 
-
  });
 
-
  $("#move5").click(function(){
 
-
  $(".doo5").toggle(500);
 
-
  });
 
-
  $("#move6").click(function(){
 
-
  $(".doo6").toggle(500);
 
-
  });
 
-
  $("#move7").click(function(){
 
-
  $(".doo7").toggle(500);
 
-
  });
 
-
  $("#move8").click(function(){
 
-
  $(".doo8").toggle(500);
 
-
  });
 
-
  $("#move9").click(function(){
 
-
  $(".doo9").toggle(500);
 
-
  });
 
});
});
</script>
</script>

Latest revision as of 02:43, 18 October 2014

Retrieved from "http://2014.igem.org/Team:NCTU_Formosa/source/header-project"