Difference between revisions of "Template:BIT-China"

Line 210: Line 210:
 
$(document).ready(function(){
 
$(document).ready(function(){
  
 +
   
 
     //拷贝导航栏的副本
 
     //拷贝导航栏的副本
 
     var header_nav=$("#home-copy-container").children("").clone();
 
     var header_nav=$("#home-copy-container").children("").clone();
 
     $("#header-container").append(header_nav);
 
     $("#header-container").append(header_nav);
  
−
            //弹出导航监听
+
    //滚动监听
−
            window.onscroll = function () {
+
    var nav_hide= $("#nav-hide").eq(0);
−
                var nav_hide= $("#nav-hide");
+
    var nav_left_wrapper=$("#nav_left_wrapper").eq(0);
−
                if($(window).scrollTop()>100){
+
    var site_change_btn=$("#site-change-btn").eq(0);
−
                    nav_hide.removeClass("roll-nav-hide");
+
    window.onscroll = function () {
−
                }
+
        if($(window).scrollTop()>100){
−
                else{
+
            nav_hide.removeClass("roll-nav-hide");
−
                    nav_hide.addClass("roll-nav-hide");
+
        }
−
                }
+
        else{
 +
            nav_hide.addClass("roll-nav-hide");
 +
        }
  
−
                //固定侧边导航
+
        //固定侧边导航
−
                if($(window).scrollTop()>95){
+
        if($(window).scrollTop()>95){
−
                    $("#nav_left_wrapper").css({
+
            nav_left_wrapper.css({
−
                        "margin-left":"0",
+
                "margin-left":"0",
−
                        "top":"50px",
+
                "top":"50px",
−
                        "position":"fixed"
+
                "position":"fixed"
−
                    });
+
            });
  
−
                    $("#site-change-btn").css({
+
            site_change_btn.css({
−
                        "position":"fixed"
+
                "position":"fixed"
−
                    })
+
            })
−
                }
+
        }
−
                else{
+
        else{
−
                    $("#nav_left_wrapper").css({
+
            nav_left_wrapper.css({
−
                        "margin-left":"-100%",
+
                "margin-left":"-100%",
−
                        "top":"auto",
+
                "top":"auto",
−
                        "position":"relative"
+
                "position":"relative"
−
                    });
+
            });
  
−
                    $("#site-change-btn").css({
+
            site_change_btn.css({
−
                        "position":"absolute"
+
                "position":"absolute"
−
                    });
+
            });
−
                }
+
        }
  
−
                //页间跳转 —— 滚动一定长度之后显示
+
        //页间跳转 —— 滚动一定长度之后显示
−
                if($(window).scrollTop()>200){
+
        if($(window).scrollTop()>200){
−
                    $("#site-change-btn").css("display","block");
+
            site_change_btn.css("display","block");
−
                }
+
        }
−
                else{
+
        else{
−
                    $("#site-change-btn").css("display","none");
+
            site_change_btn.css("display","none");
−
                }
+
        }
  
−
                //底部隐藏左侧导航
+
        //底部隐藏左侧导航
−
                if(EnteringViewport($(".footer"))){
+
        if(EnteringViewport($(".footer"))){
−
                    $("#site-change-btn").css("opacity","0");
+
            site_change_btn.css("opacity","0");
  
−
                }
+
        }
−
                else{
+
        else{
−
                    $("#site-change-btn").css("opacity","1");
+
            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 navs=$(".nav_point");
+
    var nav_shrink=$("#nav_shrink").eq(0);
−
            for(i=0;i<navs.length;i++){
+
    var nav_shrink_icon=$("#nav_shrink_icon").eq(0);
−
                navs.eq(i).click(function (e) {
+
    var slow_transition=$(".slow-transition").eq(0);
−
                    e.preventDefault();
+
    var content_right_border=$("#content-right-border").eq(0);
−
                    var href=$(this).attr("href");
+
−
                    $.scrollTop(href+"",-100,400);
+
−
                });
+
−
            }
+
  
−
            //收起左侧导航
+
    var nav_shrink_func= function () {
−
            var nav_shrink= function () {
+
        var nav_flag=false;
−
                var nav_flag=false;
+
        nav_shrink.click(function () {
−
                $("#nav_shrink").click(function () {
+
            if(!nav_flag){
−
                    var nav_shrink_icon=$("#nav_shrink_icon");
+
                slow_transition.addClass("transform_hide");
−
                    if(!nav_flag){
+
                content_right_border.css("margin-left","40px");
−
                        $(".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_icon.attr("src","https://static.igem.org/mediawiki/2016/1/17/T--BIT-China--img--pumpkin--expand.png");
−
                        $("#nav_shrink").css("left","200px");
+
                nav_shrink.css("left","200px");
  
−
                        nav_flag=true;
+
                nav_flag=true;
−
                    }
+
            }
−
                    else{
+
            else{
−
                        $(".slow-transition").removeClass("transform_hide");
+
                slow_transition.removeClass("transform_hide");
−
                        $("#content-right-border").css("margin-left","220px");
+
                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_icon.attr("src","https://static.igem.org/mediawiki/2016/8/8a/T--BIT-China--img--pumpkin--collapse.png");
−
                        $("#nav_shrink").css("left","90px");
+
                nav_shrink.css("left","90px");
  
−
                        nav_flag=false;
+
                nav_flag=false;
−
                    }
+
            }
−
                });
+
        });
−
            };
+
    };
−
             nav_shrink();
+
    nav_shrink_func();
−
              
+
 
 +
    //返回顶部
 +
    var site_backtop_img=$("#site-backtop-img").eq(0);
 +
    var site_back_btn=$("#site-back-btn").eq(0);
 +
    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");
 
             //返回顶部
 
             //返回顶部
−
             var backTopFunc = function () {
+
             $.scrollTop("body",0,200);
−
                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({
+
            site_back_btn.animate({
−
                        bottom:'500px'
+
                bottom:'500px'
−
                    },200);
+
            },200);
−
                    $("#site-back-btn").animate({
+
            site_back_btn.animate({
−
                        bottom:'30px'
+
                bottom:'30px'
−
                    },1500);
+
            },1500);
−
                    setTimeout(setImgBack,1500);
+
            setTimeout(setImgBack,1500);
−
                }
+
        }
  
−
                $("#site-back-btn").click(function () {
+
        site_back_btn.click(function () {
−
                    RollImg();
+
            RollImg();
−
                })
+
        })
−
            };
+
    };
−
            backTopFunc();
+
    backTopFunc();
  
−
        //导航栏抖动 —— 依赖于AnimateCSS
+
    //导航栏抖动 —— 依赖于AnimateCSS
−
        $('.tabdown>a').on("mouseover",function () {
+
    $('.tabdown>a').on("mouseover",function () {
−
            $(this).addClass('animated swing').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
+
        $(this).addClass('animated swing').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
−
                $(this).removeClass("animated swing");
+
            $(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 EnteringViewport = function (element) {
 
−
                var elementOffset = $(element).offset();
 
−
                var elementTop = elementOffset.top + $(element).scrollTop();
 
−
                var viewportBottom = $(window).scrollTop() + $(window).height();
 
−
                return (elementTop < viewportBottom) ? true : false;
 
−
            };
 
 
});
 
});
  

Revision as of 08:31, 7 November 2016

backtop