Difference between revisions of "Template:Fudan-CHINA"

Line 18: Line 18:
 
//jQuery_AnimateColors
 
//jQuery_AnimateColors
 
</script>
 
</script>
 +
 +
<script>
 +
$("#firstHeading").remove();
 +
$(".logo_2018").remove();
 +
</script>
 
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 
 
Line 61: Line 66:
 
     background: #ccc;
 
     background: #ccc;
 
     color: #000;
 
     color: #000;
−
     padding: 0.2em 0;}
+
     padding: 0.2em 0;
 +
}
 
#loader-wrapper {
 
#loader-wrapper {
 
     position: fixed;
 
     position: fixed;
Line 68: Line 74:
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
−
     z-index:999999;}
+
     z-index:999999;
 +
}
 
#loader {
 
#loader {
 
     display: block;
 
     display: block;
Line 80: Line 87:
 
     border: 3px solid transparent;
 
     border: 3px solid transparent;
 
     /* COLOR 1 */
 
     /* COLOR 1 */
−
     border-top-color: #FFF;
+
     border-top-color: rgba(255,0,255,1);
−
     -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+
     -webkit-animation: spin 2s linear infinite;
−
     -ms-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+
     -ms-animation: spin 2s linear infinite;  
−
     -moz-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+
     -moz-animation: spin 2s linear infinite;  
−
     -o-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */    
+
     -o-animation: spin 2s linear infinite;   
−
         animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
+
         animation: spin 2s linear infinite;  
−
     z-index:1001;}
+
     z-index:1001;
 +
}
 
#loader:before {
 
#loader:before {
 
         content: "";
 
         content: "";
Line 97: Line 105:
 
         border: 3px solid transparent;
 
         border: 3px solid transparent;
 
         /* COLOR 2 */       
 
         /* COLOR 2 */       
−
         border-top-color: #FFF;
+
         border-top-color: rgba(255,255,0,1);
−
         -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+
         -webkit-animation: spin 3s linear infinite;  
−
         -moz-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+
         -moz-animation: spin 3s linear infinite;  
−
         -o-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+
         -o-animation: spin 3s linear infinite;  
−
         -ms-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */             
+
         -ms-animation: spin 3s linear infinite;          
−
         animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}
+
         animation: spin 3s linear infinite;  
 +
}
 
#loader:after {
 
#loader:after {
 
         content: "";
 
         content: "";
Line 112: Line 121:
 
         border-radius: 50%;
 
         border-radius: 50%;
 
         border: 3px solid transparent;
 
         border: 3px solid transparent;
−
         border-top-color: #FFF;
+
         border-top-color: rgba(0,255,255,1);
 
         /* COLOR 3 */       
 
         /* COLOR 3 */       
−
         -moz-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+
         -moz-animation: spin 1.5s linear infinite;  
−
         -o-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+
         -o-animation: spin 1.5s linear infinite;  
−
         -ms-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */       
+
         -ms-animation: spin 1.5s linear infinite;        
−
         -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+
         -webkit-animation: spin 1.5s linear infinite;  
−
           animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}
+
           animation: spin 1.5s linear infinite;  
 +
}
  
  
 
@-webkit-keyframes spin {
 
@-webkit-keyframes spin {
 
         0%{  
 
         0%{  
−
             -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
+
             -webkit-transform: rotate(0deg);  
−
             -ms-transform: rotate(0deg);  /* IE 9 */
+
             -ms-transform: rotate(0deg);   
−
             transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
+
             transform: rotate(0deg);  
 
         }100%{
 
         }100%{
−
             -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
+
             -webkit-transform: rotate(360deg);   
−
             -ms-transform: rotate(360deg);  /* IE 9 */
+
             -ms-transform: rotate(360deg);   
−
             transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */}
+
             transform: rotate(360deg); }
 
}
 
}
  
 
@keyframes spin {
 
@keyframes spin {
 
         0%{  
 
         0%{  
−
             -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
+
             -webkit-transform: rotate(0deg);   
−
             -ms-transform: rotate(0deg); /* IE 9 */
+
             -ms-transform: rotate(0deg);  
−
             transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
+
             transform: rotate(0deg);   
 
         }100%{
 
         }100%{
−
             -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
+
             -webkit-transform: rotate(360deg);  
−
             -ms-transform: rotate(360deg);  /* IE 9 */
+
             -ms-transform: rotate(360deg);   
−
             transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */}
+
             transform: rotate(360deg);  }
 
}
 
}
  
Line 149: Line 159:
 
         width: 51%;
 
         width: 51%;
 
         height: 100%;
 
         height: 100%;
−
         background: rgba(0,36,49,1); /* Old browsers */
+
         background: rgba(0,36,49,1); /* loading background color!!!*/
 
         z-index: 1000;
 
         z-index: 1000;
−
         -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
+
         -webkit-transform: translateX(0);   
−
         -ms-transform: translateX(0);  /* IE 9 */
+
         -ms-transform: translateX(0);   
−
         transform: translateX(0); /* Firefox 16+, IE 10+, Opera */}
+
         transform: translateX(0);  
 +
}
 
#loader-wrapper .loader-section.section-left {left: 0;}
 
#loader-wrapper .loader-section.section-left {left: 0;}
 
#loader-wrapper .loader-section.section-right {right: 0;}
 
#loader-wrapper .loader-section.section-right {right: 0;}
Line 159: Line 170:
 
/* Loaded */
 
/* Loaded */
 
.loaded #loader-wrapper .loader-section.section-left {
 
.loaded #loader-wrapper .loader-section.section-left {
−
         -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
+
         -webkit-transform: translateX(-100%);   
−
             -ms-transform: translateX(-100%);  /* IE 9 */
+
             -ms-transform: translateX(-100%);   
−
                 transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */
+
                 transform: translateX(-100%);   
 
         -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);   
 
         -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);   
−
                 transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
+
                 transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
}
 
.loaded #loader-wrapper .loader-section.section-right {
 
.loaded #loader-wrapper .loader-section.section-right {
−
         -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
+
         -webkit-transform: translateX(100%);   
−
             -ms-transform: translateX(100%);  /* IE 9 */
+
             -ms-transform: translateX(100%);   
−
                 transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */
+
                 transform: translateX(100%);   
 
         -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);   
 
         -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);   
−
         transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
+
         transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
}
 
.loaded #loader {
 
.loaded #loader {
 
         opacity: 0;
 
         opacity: 0;
 
         -webkit-transition: all 0.3s ease-out;   
 
         -webkit-transition: all 0.3s ease-out;   
−
                 transition: all 0.3s ease-out;}
+
                 transition: all 0.3s ease-out;
 +
}
 
.loaded #loader-wrapper {
 
.loaded #loader-wrapper {
 
         visibility: hidden;
 
         visibility: hidden;
−
         -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
+
         -webkit-transform: translateY(-100%);   
−
             -ms-transform: translateY(-100%);  /* IE 9 */
+
             -ms-transform: translateY(-100%);   
−
                 transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */
+
                 transform: translateY(-100%);   
 
         -webkit-transition: all 0.3s 1s ease-out;   
 
         -webkit-transition: all 0.3s 1s ease-out;   
−
                 transition: all 0.3s 1s ease-out;}
+
                 transition: all 0.3s 1s ease-out;
 +
}
 
/* JavaScript Turned Off */
 
/* JavaScript Turned Off */
 
.no-js #loader-wrapper {display: none;}
 
.no-js #loader-wrapper {display: none;}
 
.no-js h1 {color: #222222;}
 
.no-js h1 {color: #222222;}
−
#loader-wrapper .load_title {
+
 +
#loader-wrapper .load_title {/*words*/
 
     font-family:'Open Sans';
 
     font-family:'Open Sans';
−
     color:#FFF; font-size:19px; width:100%; text-align:center; z-index:9999999999999; position:absolute; top:60%; opacity:1; line-height:30px; }
+
     color:#FFF;  
−
#loader-wrapper .load_title span {  font-weight:normal; font-style:italic; font-size:13px; color:#FFF; opacity:0.5;}
+
font-size:19px;  
 +
width:100%;  
 +
text-align:center;  
 +
z-index:9999999999999;  
 +
position:absolute;  
 +
top:60%;  
 +
opacity:1;  
 +
line-height:30px;  
 +
}
 +
#loader-wrapper .load_title span {   
 +
font-weight:normal;  
 +
font-style:italic;  
 +
font-size:13px;  
 +
color:#FFF;
 +
opacity:0.5;
 +
}
  
  
−
</style>
+
</style>
 
   
 
   
  
Line 199: Line 230:
 
     <div class="load_title">LOADING<br><span>Fudan-CHINA</span></div>
 
     <div class="load_title">LOADING<br><span>Fudan-CHINA</span></div>
 
</div>
 
</div>
−
 
−
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
 
 
 
−
 
−
 
 
<script type="text/javascript">         
 
<script type="text/javascript">         
−
    // 等待所有加载
 
 
     $(document).ready(function(){
 
     $(document).ready(function(){
 
setTimeout(function(){ $('body').addClass('loaded');
 
setTimeout(function(){ $('body').addClass('loaded');
 
         $('#loader-wrapper .load_title').remove(); }, 1500);
 
         $('#loader-wrapper .load_title').remove(); }, 1500);
−
 
−
       
 
 
     });  
 
     });  
 
</script>   
 
</script>   
 +
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
 +
 +
  
 
 
Line 240: Line 269:
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
−
 
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#top_menu_under{display: none;}
 
#top_menu_under{display: none;}
Line 292: Line 320:
 
font-family: _Quicksand;
 
font-family: _Quicksand;
 
font-size: 30px;
 
font-size: 30px;
−
 
 
text-align: center;
 
text-align: center;
 
line-height: 110px;
 
line-height: 110px;
 
}
 
}
−
 
 
.teamName{
 
.teamName{
 
font-family:"Calisto MT",_CalistoMT;
 
font-family:"Calisto MT",_CalistoMT;
 
font-weight: bold;
 
font-weight: bold;
 
}
 
}
−
.navA:link{text-decoration: none}
+
.navA:link{
 +
text-decoration: none;
 +
}
  
 
.navA:visited{
 
.navA:visited{
Line 338: Line 366:
 
</ul>
 
</ul>
 
<script>
 
<script>
−
var winWidth=$(window).width();
+
$(function(){
−
var navWidth=$('#navUl').width();
+
var navFun=function(){
−
var winHeight=$(window).height();
+
var winWidth=$(window).width();
−
$("#navUl").css("left",0.5*(winWidth-navWidth));
+
var navWidth=$('#navUl').width();
−
$("#navUl").css("top",0.1*winHeight);
+
var winHeight=$(window).height();
 +
$("#navUl").css("left",0.5*(winWidth-navWidth));
 +
$("#navUl").css("top",0.1*winHeight);
 +
};
 +
navFun();
 +
$(window).resize(function(){
 +
navFun();
 +
});
 +
 
 
 
−
$(window).resize(function(){
+
    $(window).scroll(function(){
−
var winWidth=$(window).width();
+
var winHeight=$(window).height();
−
var navWidth=$('#navUl').width();
+
        var topDis = $(window).scrollTop();
−
var winHeight=$(window).height();
+
if(topDis >150){
−
$("#navUl").css("left",0.5*(winWidth-navWidth));
+
$("#navUl").stop().animate({top:'0px',backgroundColor:"rgba(4,198,215,1)",boxShadow:"0px 0px 5px"},"fast");
−
$("#navUl").css("top",0.1*winHeight);
+
    $(".navA:not(.activeA)").hover(function () {
 +
                $(this).addClass("jqhover");
 +
            }).mouseout(function () {
 +
$(this).removeClass("jqhover");
 +
            });
 +
}
 +
else{
 +
$("#navUl").stop().animate({top:0.1*winHeight,backgroundColor:"transparent"},"fast");
 +
$(".navA:not(.activeA)").hover(function () {
 +
                $(this).removeClass("jqhover");
 +
            });
 +
};
 +
    });
 
});
 
});
−
 
−
 
−
 
−
    $(window).scroll(function(){
 
−
var winHeight=$(window).height();
 
−
        var topDis = $(window).scrollTop();
 
−
        if(topDis >150)
 
−
{
 
−
$("#navUl").stop().animate({top:'0px',backgroundColor:"rgba(4,198,215,1)",boxShadow:"0px 0px 5px"},"fast");
 
−
     
 
−
            $(".navA:not(.activeA)").hover(function () {
 
−
                $(this).addClass("jqhover");
 
−
            }).mouseout(function () {
 
−
                $(this).removeClass("jqhover");
 
−
            });
 
−
 
−
}
 
−
        else
 
−
{
 
−
$("#navUl").stop().animate({top:0.1*winHeight,backgroundColor:"transparent"},"fast");
 
−
 
−
$(".navA:not(.activeA)").hover(function () {
 
−
                $(this).removeClass("jqhover");
 
−
            });
 
−
}
 
−
    });
 
 
</script>
 
</script>
 
 
Line 385: Line 407:
 
 
 
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
  
 
</html>
 
</html>

Revision as of 11:34, 21 September 2018

LOADING
Fudan-CHINA