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

 
(394 intermediate revisions by 11 users not shown)
Line 2: Line 2:
 
<html>
 
<html>
 
<head>
 
<head>
−
<!--    匯入jQuery    -->
+
−
<link href='https://2015.igem.org/Team:NCTU_Formosa/wiki_reset?action=raw&ctype=text/css' rel="stylesheet">
+
<style>
−
    <script>
+
#taggd img {
−
        $(document).ready(function(){
+
display: inline;
−
           
+
width: 100%;
−
            //根據捲軸的位置改變右方導覽列游標的顏色
+
}
−
            $(window).scroll(function(){
+
body{
−
                if($(window).scrollTop()>=$(".p01").offset().top && $(window).scrollTop()<$(".p02").offset().top){
+
background-color:#FCFCDE;}
−
                    $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
+
 
−
                    $(".sidenav li:eq(0)").css("background-color","#ffffff")
+
 
−
                }else if($(window).scrollTop()>=$(".p02").offset().top && $(window).scrollTop()<$(".p03").offset().top){
+
 
−
                    $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
+
.taggd-wrapper {
−
                    $(".sidenav li:eq(1)").css("background-color","#ffffff")
+
overflow: hidden;
−
                }else if($(window).scrollTop()>=$(".p03").offset().top && $(window).scrollTop()<$(".p04").offset().top){
+
position: relative;
−
                    $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
+
 
−
                    $(".sidenav li:eq(2)").css("background-color","#ffffff")
+
-webkit-font-smoothing: antialiased;
−
                }else if($(window).scrollTop()>=$(".p04").offset().top && $(window).scrollTop()<$(".p05").offset().top){
+
-moz-osx-font-smoothing: antialiased;
−
                    $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
+
}
−
                    $(".sidenav li:eq(3)").css("background-color","#ffffff")
+
 
−
                }else if($(window).scrollTop()>=$(".p05").offset().top){
+
.taggd-wrapper .taggd-item {
−
                    $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
+
    background-color: #FF6668;
−
                    $(".sidenav li:eq(4)").css("background-color","#ffffff")
+
opacity:0.9;
−
                }
+
cursor: pointer;
−
            })
+
display: block;
−
                   
+
padding: 14px;
−
            //點選右方導覽列時會到指定圖片
+
z-index: 10;
−
            var num_li=$("li").length
+
 
−
            for(i=0;i<=num_li;i++){
+
  -webkit-border-radius: 50%;
−
                $(".sidenav li:eq("+i+")").click({id:i},function(e){
+
    -moz-border-radius: 50%;
−
                    $("html,body").stop()
+
    border-radius: 50%;
−
                    $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
+
 
−
                    page=e.data.id+1
+
    -webkit-transition: background-color 0.2s;
−
                    $("html,body").animate({"scrollTop":$(".p0"+page).offset().top})
+
    -moz-transition: background-color 0.2s;
−
                    $(".sidenav li:eq("+e.data.id+")").css("background-color","#ffffff")//被點擊到的游標變色，前面的selector用this也可以
+
    transition: background-color 0.2s;
−
                })
+
 
−
            }
+
}
−
            //一進入網頁時，將導覽列垂直置中計算導覽列置中的位置
+
 
−
          center()
+
.taggd-wrapper .taggd-item.active,
−
           
+
.taggd-wrapper .taggd-item:hover { background-color: rgba(219, 50, 92, 0.75); }
−
          //縮放網頁時，將導覽列垂直置中
+
 
−
            $(window).resize(function(){
+
.taggd-wrapper .taggd-item-hover {
−
                center()
+
    background-color: rgb(219, 50, 92);
−
            })
+
color: transparent;
−
           
+
cursor: default;
−
            //計算導覽列垂直置中的高度
+
display: block;
−
            function center(){
+
    font-weight: lighter;
−
                pos=$(window).height()/2-$(".sidenav").height()/2
+
opacity: 0;
−
                $(".sidenav").css("top",pos)
+
overflow: hidden;
−
            }
+
padding: 0 10px;
−
           
+
z-index: 8;
−
        })
+
 
−
    </script>
+
-webkit-border-radius: 4px;
−
<style>
+
-moz-border-radius: 4px;
−
body {
+
border-radius: 4px;
−
color:#fff;
+
 
−
margin:0;
+
-webkit-transition: all 0.2s;
−
padding:0;
+
-moz-transition: all 0.2s;
−
background:#3a4044;
+
transition: all 0.2s;
 +
 +
-webkit-touch-callout: none;
 +
    -webkit-user-select: none;
 +
    -khtml-user-select: none;
 +
    -moz-user-select: none;
 +
    -ms-user-select: none;
 +
    user-select: none;
 +
    display:none;
 +
font-size:30pt;
 +
}
 +
 
 +
.taggd-wrapper .taggd-item-hover.show {
 +
color: #fff;
 +
opacity: 1;
 +
padding: 10px;
 +
z-index: 9;
 +
display: block;
 +
}
 +
 
 +
.taggd-wrapper .taggd-item-hover input {
 +
background-color: transparent;
 +
border: 0;
 +
margin: 0;
 +
outline: 0;
 +
padding: 0;
 +
 +
-webkit-font-smoothing: antialiased;
 +
-moz-osx-font-smoothing: antialiased;
 +
}
 +
 
 +
.taggd-wrapper .taggd-item-hover button {
 +
background-color: #fff;
 +
border: 0;
 +
color: rgb(219, 50, 92);
 +
font-family: Arial;
 +
font-size: 0.666em;
 +
height: 1.5em;
 +
line-height: 1;
 +
margin: 0 0 0 0.25em;
 +
padding: 0;
 +
text-align: center;
 +
vertical-align: middle;
 +
width: 1.5em;
 +
 +
-moz-border-radius: 50%;
 +
-webkit-border-radius: 50%;
 +
border-radius: 50%;
 +
 +
-webkit-font-smoothing: antialiased;
 +
-moz-osx-font-smoothing: antialiased;
 +
}
 +
 
 +
.taggd-wrapper .taggd-editor {
 +
position: absolute;
 +
}
 +
.goto1{
 +
position:relative;
 +
padding-left:76vw;
 +
padding-top:2vh;
 
}
 
}
−
* {
+
.goto1 a{
−
margin:0;
+
text-decoration:none;
−
padding:0;
+
color:#000;
 
}
 
}
−
/*    插入背景圖片    */
+
</style>
−
    .p01{
+
−
background-image:url(https://static.igem.org/mediawiki/2015/c/c0/NCTU_Formosa_metal_Style_background.jpg);
+
<script src="https://2015.igem.org/Team:NCTU_Formosa/source/taggd?action=raw&ctype=text/javascript"></script>
−
        background-repeat: no-repeat;
+
−
background-position:center;
+
−
background-size:cover;
+
−
        height:100vh;
+
−
        padding:3px;
+
−
    }
+
−
    .p02{
+
−
        background-image:url(images/p02.jpg);
+
−
        background-size:cover;
+
−
        background-repeat: no-repeat;
+
−
        height:100vh;
+
−
    }
+
−
    .p03{
+
−
        background-image:url(images/p03.jpg);
+
−
        background-size:cover;
+
−
        background-repeat: no-repeat;
+
−
        height:100vh;
+
−
    }
+
−
    .p04{
+
−
        background-image:url(images/p04.jpg);
+
−
        background-size:cover;
+
−
        background-repeat: no-repeat;
+
−
        height:100vh;
+
−
    }
+
−
    .p05{
+
−
        background-image:url(images/p05.jpg);
+
−
        background-size:cover;
+
−
        background-repeat: no-repeat;
+
−
        height:100vh;
+
−
    }
+
−
/*    插入導覽列    */
+
−
    .sidenav{
+
−
        position: fixed;
+
−
        top:50%;
+
−
        right:90px;
+
−
        cursor:pointer;
+
−
    }
+
−
#sidenav ul li{
+
−
display:block;
+
−
    }
+
−
    li.navli{
+
−
        width:15px;
+
−
        height:15px;
+
−
        margin: 15px;
+
−
        background-color: transparent;
+
−
        border-radius: 10px;
+
−
        list-style-type: none;
+
−
border: #fff 2px solid;
+
−
    }
+
−
 
+
−
span {
+
−
display: block;
+
−
right: 140px;
+
−
top: 0px;
+
−
position: relative;
+
−
font-weight: 200;
+
−
letter-spacing: 2px;
+
−
font-size: 120%; }
+
−
</style>
+
 
</head>
 
</head>
 
<body>
 
<body>
−
<div class="container">
+
<div id="taggd" style="width:60vw;margin:0 auto;">
−
    <div class="sidenav">
+
<img src="https://static.igem.org/mediawiki/2015/6/6d/Nctu_formosa_map3.png" class="taggd" alt=""/>
−
        <ul>
+
−
            <li class="navli" style="background-color:#ffffff"><SPAN>Project</SPAN></li>
+
−
            <li class="navli"><SPAN>Background</SPAN></li>
+
−
            <li class="navli"><SPAN>Design</SPAN></li>
+
−
            <li class="navli"><SPAN>Result</SPAN></li>
+
−
            <li class="navli"><SPAN>Modeling</SPAN></li>
+
−
 
+
−
        </ul>
+
−
    </div>
+
−
    <div class="p01">Page 1</div>
+
−
    <div class="p02">Page 2</div>
+
−
    <div class="p03">Page 3</div>
+
−
    <div class="p04">Page 4</div>
+
−
    <div class="p05">Page 5</div>
+
 
</div>
 
</div>
 +
<div class="goto1">
 +
<a href="https://2015.igem.org/Team:NCTU_Formosa/Description"><img src="https://static.igem.org/mediawiki/2015/c/c2/%E7%AE%AD%E9%A0%AD2.png"; width=50vw;><br><br>Go to Description</a>
 +
</div>
 +
<script>
 +
var options = {
 +
align: {
 +
y: 'top'
 +
},
 +
 +
offset: {
 +
top: 20
 +
},
 +
handlers: {
 +
click: function( e, data ) {
 +
      window.open(
 +
        'https://2015.igem.org/Team:NCTU_Formosa/' + data.uri,
 +
        '_blank'
 +
      );},
 +
  mouseenter: 'show',
 +
    mouseleave: 'hide'
 +
  }
 +
 +
};
 +
 +
var data = [
 +
{
 +
"x": 0.20207429501084598,
 +
"y": 0.864618860845839,
 +
"text": "Policy & Practices",
 +
uri: 'Practices'
 +
},
 +
{
 +
"x": 0.4233324295010846,
 +
"y": 0.9014537858117326,
 +
"text": "Team",
 +
uri: 'Attributions'
 +
},
 +
{
 +
"x": 0.4200786334056399,
 +
"y": 0.2970881650750341,
 +
"text": "Project",
 +
uri: 'Description'
 +
},
 +
{
 +
"x": 0.5816838394793926,
 +
"y": 0.3925861186903138,
 +
"text": "Parts",
 +
uri: 'Parts'
 +
},
 +
{
 +
"x": 0.6402521691973969,
 +
"y": 0.6367880286493861,
 +
"text": "Achievement",
 +
uri: 'Achievement'
 +
},
 +
{
 +
"x": 0.7248508676789588,
 +
"y": 0.4717129945429741,
 +
"text": "Notebook",
 +
uri: 'LabSafety'
 +
}
 +
]
 +
 +
var taggd = $('.taggd').taggd( options, data );
 +
</script>
  
 
</body>
 
</body>
 
</html>
 
</html>
 +
{{Team:NCTU_Formosa/footer}}

Latest revision as of 01:34, 19 September 2015



Go to Description