Difference between revisions of "Template:BIT-China"

Line 74: Line 74:
  
 
     <!-- BEGIN HEADER -->
 
     <!-- BEGIN HEADER -->
−
     <div class="header clearfix" id="header" style="width: 100%;position: relative;padding-bottom: 20px;
+
     <div class="header clearfix" id="header" style="width: 100%;position: relative;padding-bottom: 20px;background-size:100% 100%;
 
                                 background-image: url(https://static.igem.org/mediawiki/2016/9/9a/T--BIT-China--img--top_bg.png);">
 
                                 background-image: url(https://static.igem.org/mediawiki/2016/9/9a/T--BIT-China--img--top_bg.png);">
 
         <!--需要动态显示的导航栏-->
 
         <!--需要动态显示的导航栏-->
Line 153: Line 153:
 
                             <li><a href="https://2016.igem.org/Team:BIT-China/Team">Members</a></li>
 
                             <li><a href="https://2016.igem.org/Team:BIT-China/Team">Members</a></li>
 
                             <li><a href="https://2016.igem.org/Team:BIT-China/Collaborations">Collaborations</a></li>
 
                             <li><a href="https://2016.igem.org/Team:BIT-China/Collaborations">Collaborations</a></li>
−
                             <li><a href="https://2016.igem.org/Team:BIT-China/Attributions">Attributions</a></li>
+
                             <li><a href="ht
−
                        </ul>
+
−
                    </li>
+
−
 
+
−
                    <li class="tabdown">
+
−
                        <a class="tabdown-toggle" data-toggle="tabdown" data-target="#" href="javascript:;">
+
−
                            <img style="height: 30px;" src="https://static.igem.org/mediawiki/2016/3/3c/T--BIT-China--img--hp.png"
+
−
                                alt="hp">
+
−
                            <!--Human Practice-->
+
−
                            <!-- https://2016.igem.org/Team:BIT-China/Human_Practices-->
+
−
                        </a>
+
−
 
+
−
                        <ul class="tabdown-menu">
+
−
                            <li><a href="https://2016.igem.org/Team:BIT-China/HP/Gold">HP_Gold</a></li>
+
−
                            <li><a href="https://2016.igem.org/Team:BIT-China/HP/Silver">HP_Silver</a></li>
+
−
                        </ul>
+
−
                    </li>
+
−
                </ul>
+
−
            </div>
+
−
            <!-- END NAVIGATION -->
+
−
        </div>
+
−
    </div>
+
−
 
+
−
    <!--显示在顶部的导航栏——不固定-->
+
−
    <div class="col-sm-12" style="padding: 0;">
+
−
        <div class="header-container clearfix home-img" id="header-container"
+
−
            style="margin-top: 20px" >
+
−
        </div>
+
−
    </div>
+
−
    </div>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
<!--回到顶部按钮-->
+
−
<div id="site-back-btn"
+
−
    style="position:fixed;right: 20px;bottom: 40px;z-index: 9">
+
−
    <img id="site-backtop-img" onmouseover="this.src='https://static.igem.org/mediawiki/2016/3/3c/T--BIT-China--img--backtoping.png'"
+
−
        onmouseout="this.src='https://static.igem.org/mediawiki/2016/5/5b/T--BIT-China--img--backtop.png'"
+
−
        src="https://static.igem.org/mediawiki/2016/5/5b/T--BIT-China--img--backtop.png" alt="backtop"
+
−
            style="width: 50px;height: auto;">
+
−
</div>
+
−
 
+
−
<script src="https://2016.igem.org/Team:BIT-China/js/basic/jquery-2-0-0?action=raw&ctype=text/javascript"></script>
+
−
<script>
+
−
$(document).ready(function(){
+
−
 
+
−
    //拷贝导航栏的副本
+
−
    var header_nav=$("#home-copy-container").children("").clone();
+
−
    $("#header-container").append(header_nav);
+
−
 
+
−
            //平滑滚动
+
−
            $.scrollTop = function(selector,adjust,time){
+
−
                $(document.body).animate({
+
−
                    scrollTop:($(selector).offset().top+adjust)+"px"
+
−
                },time);
+
−
                $(document.documentElement).animate({
+
−
                    scrollTop:($(selector).offset().top+adjust)+"px"
+
−
                },time);
+
−
            }
+
−
            //弹出导航监听
+
−
            window.onscroll = function () {
+
−
                var nav_hide= $("#nav-hide");
+
−
                if($(window).scrollTop()>100){
+
−
                    nav_hide.removeClass("roll-nav-hide");
+
−
                }
+
−
                else{
+
−
                    nav_hide.addClass("roll-nav-hide");
+
−
                }
+
−
 
+
−
                //固定侧边导航
+
−
                if($(window).scrollTop()>95){
+
−
                    $("#nav_left_wrapper").css({
+
−
                        "margin-left":"0",
+
−
                        "top":"50px",
+
−
                        "position":"fixed"
+
−
                    });
+
−
 
+
−
                    $("#site-change-btn").css({
+
−
                        "position":"fixed"
+
−
                    })
+
−
                }
+
−
                else{
+
−
                    $("#nav_left_wrapper").css({
+
−
                        "margin-left":"-100%",
+
−
                        "top":"auto",
+
−
                        "position":"relative"
+
−
                    });
+
−
 
+
−
                    $("#site-change-btn").css({
+
−
                        "position":"absolute"
+
−
                    });
+
−
                }
+
−
 
+
−
                //页间跳转 —— 滚动一定长度之后显示
+
−
                if($(window).scrollTop()>300){
+
−
                    $("#site-change-btn").css("display","block");
+
−
                }
+
−
                else{
+
−
                    $("#site-change-btn").css("display","none");
+
−
                }
+
−
 
+
−
                //底部隐藏左侧导航
+
−
                if(EnteringViewport($(".footer"))){
+
−
                    $("#site-change-btn").css("opacity","0");
+
−
 
+
−
                }
+
−
                else{
+
−
                    $("#site-change-btn").css("opacity","1");
+
−
                }
+
−
            };
+
−
 
+
−
 
+
−
            //平滑跳转
+
−
            var navs=$(".nav_point");
+
−
            for(i=0;i<navs.length;i++){
+
−
                navs.eq(i).click(function (e) {
+
−
                    e.preventDefault();
+
−
                    var href=$(this).attr("href");
+
−
                    $.scrollTop(href+"",-100,400);
+
−
                });
+
−
            }
+
−
 
+
−
            //收起左侧导航
+
−
            var nav_shrink= function () {
+
−
                var nav_flag=false;
+
−
                $("#nav_shrink").click(function () {
+
−
                    var nav_shrink_icon=$("#nav_shrink_icon");
+
−
                    if(!nav_flag){
+
−
                        $(".slow-transition").addClass("transform_hide");
+
−
                        $("#content-right-border").css("margin-left","40px");
+
−
 
+
−
                        nav_shrink_icon.attr("src","https://static.igem.org/mediawiki/2016/1/17/T--BIT-China--img--pumpkin--expand.png");
+
−
                        $("#nav_shrink").css("left","200px");
+
−
 
+
−
                        nav_flag=true;
+
−
                    }
+
−
                    else{
+
−
                        $(".slow-transition").removeClass("transform_hide");
+
−
                        $("#content-right-border").css("margin-left","220px");
+
−
 
+
−
                        nav_shrink_icon.attr("src","https://static.igem.org/mediawiki/2016/8/8a/T--BIT-China--img--pumpkin--collapse.png");
+
−
                        $("#nav_shrink").css("left","90px");
+
−
 
+
−
                        nav_flag=false;
+
−
                    }
+
−
                });
+
−
            };
+
−
            nav_shrink();
+
−
           
+
−
            //返回顶部
+
−
            var backTopFunc = function () {
+
−
                var running=false;
+
−
                function setImgBack(){
+
−
                    $("#site-backtop-img").attr("src","https://static.igem.org/mediawiki/2016/5/5b/T--BIT-China--img--backtop.png");
+
−
                    running=false;
+
−
                }
+
−
                function RollImg(){
+
−
                    if(running) return;
+
−
                    running=true;
+
−
                    $("#site-backtop-img").attr("src","https://static.igem.org/mediawiki/2016/3/3c/T--BIT-China--img--backtoping.png");
+
−
                    //返回顶部
+
−
                    $.scrollTop("body",0,200);
+
−
 
+
−
                    $("#site-back-btn").animate({
+
−
                        bottom:'500px'
+
−
                    },200);
+
−
                    $("#site-back-btn").animate({
+
−
                        bottom:'30px'
+
−
                    },1500);
+
−
                    setTimeout(setImgBack,1500);
+
−
                }
+
−
 
+
−
                $("#site-back-btn").click(function () {
+
−
                    RollImg();
+
−
                })
+
−
            };
+
−
            backTopFunc();
+
−
 
+
−
        //导航栏抖动 —— 依赖于AnimateCSS
+
−
        $('.tabdown>a').on("mouseover",function () {
+
−
            $(this).addClass('animated swing').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
+
−
                $(this).removeClass("animated swing");
+
−
            });
+
−
        });
+
−
 
+
−
            //判断元素进入视口
+
−
            var EnteringViewport = function (element) {
+
−
                var elementOffset = $(element).offset();
+
−
                var elementTop = elementOffset.top + $(element).scrollTop();
+
−
                var viewportBottom = $(window).scrollTop() + $(window).height();
+
−
                return (elementTop < viewportBottom) ? true : false;
+
−
            };
+
−
});
+
−
 
+
−
    //检测网页加载完毕
+
−
    var stateChange = function () {
+
−
        if(document.readyState == "complete"){
+
−
            $("#site-cover").fadeOut(1000);
+
−
 
+
−
        }
+
−
    };
+
−
    document.onreadystatechange=stateChange;
+
−
 
+
−
 
+
−
</script>
+
−
<body>
+
−
</html>
+

Revision as of 10:02, 19 October 2016