Difference between revisions of "Template:BIT-China"

Line 75: Line 75:
 
     <!-- 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: 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);">
 
         <!--需要动态显示的导航栏-->
 
         <!--需要动态显示的导航栏-->
 
     <div class="col-sm-12 roll-nav roll-nav-hide content-wrap" id="nav-hide">
 
     <div class="col-sm-12 roll-nav roll-nav-hide content-wrap" id="nav-hide">
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="ht
+
                             <li><a href="https://2016.igem.org/Team:BIT-China/Attributions">Attributions</a></li>
 +
                        </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:13, 19 October 2016

backtop