|
|
| (32 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <html>
| + | {{Fudan-CHINA/initialize}} |
| − |
| + | {{Fudan-CHINA/mainNav}} |
| − |
| + | |
| − |
| + | |
| − | <!--start---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | |
| − | </p>
| + | |
| − | <script>
| + | |
| − | /*function load() {
| + | |
| − | var a= setTimeout("loading.style.transition='opacity 0.3s'",0)
| + | |
| − | //设置透明度改变的过渡时间为0.3秒
| + | |
| − | var b= setTimeout("loading.style.opacity=0",500)
| + | |
| − | //0.5秒后加载动画开始变为透明
| + | |
| − | var c= setTimeout("loading.style.display='none'",800)
| + | |
| − | //当透明度为0的时候，隐藏掉它
| + | |
| − | }
| + | |
| − | | + | |
| − | $(".mediawiki").attr({ onload: "load()"}*/
| + | |
| − |
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <!--loading------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | |
| − | <style>
| + | |
| − | | + | |
| − | | + | |
| − | canvas {
| + | |
| − | bottom: 0;
| + | |
| − | left: 0;
| + | |
| − | margin: auto;
| + | |
| − | position: absolute;
| + | |
| − | right: 0;
| + | |
| − | top: 0;
| + | |
| − | z-index: 9999;
| + | |
| − | }</style>
| + | |
| − |
| + | |
| − | <div id="loading">
| + | |
| − | <div></div>
| + | |
| − | | + | |
| − | <script>
| + | |
| − | var $ = {};
| + | |
| − | | + | |
| − | $.Particle = function( opt ) {
| + | |
| − | this.radius = 7;
| + | |
| − | this.x = opt.x;
| + | |
| − | this.y = opt.y;
| + | |
| − | this.angle = opt.angle;
| + | |
| − | this.speed = opt.speed;
| + | |
| − | this.accel = opt.accel;
| + | |
| − | this.decay = 0.01;
| + | |
| − | this.life = 1;
| + | |
| − | };
| + | |
| − | | + | |
| − | $.Particle.prototype.step = function( i ) {
| + | |
| − | this.speed += this.accel;
| + | |
| − | this.x += Math.cos( this.angle ) * this.speed;
| + | |
| − | this.y += Math.sin( this.angle ) * this.speed;
| + | |
| − | this.angle += $.PI / 64;
| + | |
| − | this.accel *= 1.01;
| + | |
| − | this.life -= this.decay;
| + | |
| − |
| + | |
| − | if( this.life <= 0 ) {
| + | |
| − | $.particles.splice( i, 1 );
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | $.Particle.prototype.draw = function( i ) {
| + | |
| − | $.ctx.fillStyle = $.ctx.strokeStyle = 'hsla(' + ( $.tick + ( this.life * 120 ) ) + ', 100%, 60%, ' + this.life + ')';
| + | |
| − | $.ctx.beginPath();
| + | |
| − | if( $.particles[ i - 1 ] ) {
| + | |
| − | $.ctx.moveTo( this.x, this.y );
| + | |
| − | $.ctx.lineTo( $.particles[ i - 1 ].x, $.particles[ i - 1 ].y );
| + | |
| − | }
| + | |
| − | $.ctx.stroke();
| + | |
| − |
| + | |
| − | $.ctx.beginPath();
| + | |
| − | $.ctx.arc( this.x, this.y, Math.max( 0.001, this.life * this.radius ), 0, $.TWO_PI );
| + | |
| − | $.ctx.fill();
| + | |
| − |
| + | |
| − | var size = Math.random() * 1.25;
| + | |
| − | $.ctx.fillRect( ~~( this.x + ( ( Math.random() - 0.5 ) * 35 ) * this.life ), ~~( this.y + ( ( Math.random() - 0.5 ) * 35 ) * this.life ), size, size );
| + | |
| − | }
| + | |
| − | | + | |
| − | $.step = function() {
| + | |
| − | $.particles.push( new $.Particle({
| + | |
| − | x: $.width / 2 + Math.cos( $.tick / 20 ) * $.min / 2,
| + | |
| − | y: $.height / 2 + Math.sin( $.tick / 20 ) * $.min / 2,
| + | |
| − | angle: $.globalRotation + $.globalAngle,
| + | |
| − | speed: 0,
| + | |
| − | accel: 0.01
| + | |
| − | }));
| + | |
| − |
| + | |
| − | $.particles.forEach( function( elem, index ) {
| + | |
| − | elem.step( index );
| + | |
| − | });
| + | |
| − |
| + | |
| − | $.globalRotation += $.PI / 6;
| + | |
| − | $.globalAngle += $.PI / 6;
| + | |
| − | };
| + | |
| − | | + | |
| − | $.draw = function() {
| + | |
| − | $.ctx.clearRect( 0, 0, $.width, $.height );
| + | |
| − |
| + | |
| − | $.particles.forEach( function( elem, index ) {
| + | |
| − | elem.draw( index );
| + | |
| − | });
| + | |
| − | };
| + | |
| − | | + | |
| − | $.init = function() {
| + | |
| − | $.canvas = document.createElement( 'canvas' );
| + | |
| − | $.ctx = $.canvas.getContext( '2d' );
| + | |
| − | $.width = 300;
| + | |
| − | $.height = 300;
| + | |
| − | $.canvas.width = $.width * window.devicePixelRatio;
| + | |
| − | $.canvas.height = $.height * window.devicePixelRatio;
| + | |
| − | $.canvas.style.width = $.width + 'px';
| + | |
| − | $.canvas.style.height = $.height + 'px';
| + | |
| − | $.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
| + | |
| − | $.min = $.width * 0.5;
| + | |
| − | $.particles = [];
| + | |
| − | $.globalAngle = 0;
| + | |
| − | $.globalRotation = 0;
| + | |
| − | $.tick = 0;
| + | |
| − | $.PI = Math.PI;
| + | |
| − | $.TWO_PI = $.PI * 2;
| + | |
| − | $.ctx.globalCompositeOperation = 'lighter';
| + | |
| − | document.body.appendChild( $.canvas );
| + | |
| − | $.loop();
| + | |
| − | };
| + | |
| − | | + | |
| − | $.loop = function() {
| + | |
| − | requestAnimationFrame( $.loop );
| + | |
| − | $.step();
| + | |
| − | $.draw();
| + | |
| − | $.tick++;
| + | |
| − | };
| + | |
| − | | + | |
| − | $.init();</script>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | <!--------------------------------------------------------------------------------------------------------------------------------------------------->
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − | <!--get jQuery------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | |
| − | <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQuery&action=raw&ctype=text/javascript">
| + | |
| − | //jQuery
| + | |
| − | </script>
| + | |
| − |
| + | |
| − | <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/SuperSlide&action=raw&ctype=text/javascript">
| + | |
| − | //jQuery_SuperSlide
| + | |
| − | </script>
| + | |
| − |
| + | |
| − | <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQueryAnimateColors&action=raw&ctype=text/javascript">
| + | |
| − | //jQuery_AnimateColors
| + | |
| − | </script>
| + | |
| − | <!---------------------------------------------------------------------------------------------------------------------------------------------------->
| + | |
| − |
| + | |
| − | | + | |
| − |
| + | |
| − | | + | |
| − |
| + | |
| − | <!--make the menu hidden------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | |
| − | <script>
| + | |
| − | $(document).ready(function(){
| + | |
| − | $('#sideMenu').remove();
| + | |
| − | let trigger = document.createElement('div');
| + | |
| − | $(trigger).attr('id','menu-trigger');
| + | |
| − | let menu = document.getElementById('top_menu_14');
| + | |
| − | $(trigger).mouseenter(function(){
| + | |
| − | $(menu).css('top','0');
| + | |
| − | });
| + | |
| − | $(trigger).mouseleave(function(){
| + | |
| − | $(menu).css('top','-20px');
| + | |
| − | });
| + | |
| − | document.body.appendChild(trigger);
| + | |
| − | });
| + | |
| − | </script>
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − | <style>
| + | |
| − | #home_logo, #sideMenu,#top { display:none; }
| + | |
| − | #sideMenu, #top_title, .patrollink {display:none;}
| + | |
| − | #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;}
| + | |
| − | | + | |
| − | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| + | |
| − | #top_menu_under{display: none;}
| + | |
| − | | + | |
| − |
| + | |
| − | #top_menu_14{
| + | |
| − | top: -20px; padding-bottom: 2px; transition: top 0.3s;
| + | |
| − | }
| + | |
| − | #top_menu_14:hover {
| + | |
| − | top: 0 !important;
| + | |
| − | }
| + | |
| − | #menu-trigger{
| + | |
| − | width:100%;
| + | |
| − | height:16px;
| + | |
| − | position:fixed;
| + | |
| − | left:0;
| + | |
| − | top:0;
| + | |
| − | z-index:10;
| + | |
| − | }
| + | |
| − | #HQ_page ul.navigation-bar > li > ul.sub-menu > li{
| + | |
| − | min-width: 100px;
| + | |
| − | }
| + | |
| − | #HQ_page ul.navigation-bar > li > ul > li.long{
| + | |
| − | min-width: 160px;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | <!---------------------------------------------------------------------------------------------------------------------------------------------------->
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − | <!--get fonts----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | |
| − | <style>
| + | |
| − | @font-face
| + | |
| − | {
| + | |
| − | font-family:_Quicksand;/*for navigation bar*/
| + | |
| − | src: url('https://static.igem.org/mediawiki/2018/8/8a/T--Fudan-CHINA--Quicksand.ttf');
| + | |
| − | }
| + | |
| − | @font-face
| + | |
| − | {
| + | |
| − | font-family:_wonderwall;
| + | |
| − | src: url('https://static.igem.org/mediawiki/2018/4/43/T--Fudan-CHINA--wonderwall.ttf');
| + | |
| − | }
| + | |
| − | @font-face
| + | |
| − | {
| + | |
| − | font-family:_LucidaCalligraphy;
| + | |
| − | src: url('https://static.igem.org/mediawiki/2018/a/a8/T--Fudan-CHINA--LucidaCalligraphy.ttf');
| + | |
| − | }
| + | |
| − | @font-face
| + | |
| − | {
| + | |
| − | font-family:_CalistoMT;
| + | |
| − | src: url('https://static.igem.org/mediawiki/2018/b/be/T--Fudan-CHINA--CalistoMT.ttf');
| + | |
| − | }
| + | |
| − | @font-face
| + | |
| − | {
| + | |
| − | font-family:_Algerian;
| + | |
| − | src: url('https://static.igem.org/mediawiki/2018/5/56/T--Fudan-CHINA--Algerian.ttf');
| + | |
| − | }
| + | |
| − |
| + | |
| − |
| + | |
| − | </style>
| + | |
| − | <!---------------------------------------------------------------------------------------------------------------------------------------------------->
| + | |
| − |
| + | |
| − | | + | |
| − | <!--navigation bar-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| + | |
| − | <style>
| + | |
| − | #navUl{
| + | |
| − | list-style: none;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | overflow: hidden;
| + | |
| − | position:fixed;
| + | |
| − | width: 1500px;
| + | |
| − | }
| + | |
| − | .navLi:not(.navImg){
| + | |
| − | float: right;
| + | |
| − | }
| + | |
| − | .navA{
| + | |
| − | display: block;
| + | |
| − | height: 110px;
| + | |
| − | padding:0 20px;
| + | |
| − | color:white;
| + | |
| − | font-family: _Quicksand;
| + | |
| − | font-size: 30px;
| + | |
| − |
| + | |
| − | text-align: center;
| + | |
| − | line-height: 110px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .teamName{
| + | |
| − | font-family:"Calisto MT",_CalistoMT;
| + | |
| − | font-weight: bold;
| + | |
| − | }
| + | |
| − | .navA:link{text-decoration: none}
| + | |
| − | | + | |
| − | .navA:visited{
| + | |
| − | color: white;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .navA:hover:not(.activeA){
| + | |
| − | color: rgba(0,189,234,1);
| + | |
| − | }
| + | |
| − | .jqhover {
| + | |
| − | color:black !important;
| + | |
| − | }
| + | |
| − | .navA:hover{
| + | |
| − | text-decoration:none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navA:active{
| + | |
| − | text-decoration:none;
| + | |
| − | color: white;
| + | |
| − | }
| + | |
| − |
| + | |
| − | </style>
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − | <ul id="navUl" style="z-index: 99;">
| + | |
| − | <li class="navLi navImg" style="display: inline-block;float: left;width: 10px;" href="#8"></li>
| + | |
| − | <li class="navLi navImg" style="float: left;"><a href="https://2018.igem.org/Team:Fudan-CHINA"><img class="navA" style="width=90px;height:90px;padding:10px; " src="https://static.igem.org/mediawiki/2018/6/6b/T--Fudan-CHINA--teamBadgeWhite_noCircle.png" /></a></li>
| + | |
| − | <li class="navLi navImg" style="float: left;position: relative;"><a class="navA activeA teamName" href="https://2018.igem.org/Team:Fudan-CHINA">Fudan-CHINA</a></li>
| + | |
| − | <li class="navLi"><a class="navA" href="#7">Team</a></li>
| + | |
| − | <li class="navLi"><a class="navA" href="#6">Parts</a></li>
| + | |
| − | <li class="navLi"><a class="navA" href="#5">Practices</a></li>
| + | |
| − | <li class="navLi"><a class="navA" href="#4">Lab</a></li>
| + | |
| − | <li class="navLi"><a class="navA" href="#3">Modeling</a></li>
| + | |
| − | <li class="navLi"><a class="navA" href="#2">Project</a></li>
| + | |
| − | </ul>
| + | |
| − | <script>
| + | |
| − | var winWidth=$(window).width();
| + | |
| − | var navWidth=$('#navUl').width();
| + | |
| − | var winHeight=$(window).height();
| + | |
| − | $("#navUl").css("left",0.5*(winWidth-navWidth));
| + | |
| − | $("#navUl").css("top",0.1*winHeight);
| + | |
| − |
| + | |
| − | $(window).resize(function(){
| + | |
| − | var winWidth=$(window).width();
| + | |
| − | var navWidth=$('#navUl').width();
| + | |
| − | var winHeight=$(window).height();
| + | |
| − | $("#navUl").css("left",0.5*(winWidth-navWidth));
| + | |
| − | $("#navUl").css("top",0.1*winHeight);
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − |
| + | |
| − | $(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>
| + | |
| − | <!---------------------------------------------------------------------------------------------------------------------------------------------------->
| + | |
| − | </html>
| + | |
