(fix padding) |
(fix animation) |
||
Line 248: | Line 248: | ||
</style> | </style> | ||
+ | <div id="img" style="position: absolute; z-index: -99; top: 0; left: 0;"></div> | ||
+ | <div id="mask" style="position: absolute; z-index: -98; top: 0; left: 0; background: white; display: none;"></div> | ||
<div class="container"> | <div class="container"> | ||
<nav class="header"> | <nav class="header"> | ||
Line 557: | Line 559: | ||
#HQ_page{ | #HQ_page{ | ||
− | background: url("https://static.igem.org/mediawiki/2019/e/ee/T--USTC-Software--WEB.svg") center no-repeat; | + | /*background: url("https://static.igem.org/mediawiki/2019/e/ee/T--USTC-Software--WEB.svg") center no-repeat; |
− | background-size: cover; | + | background-size: cover;*/ |
height: 98vh; | height: 98vh; | ||
+ | } | ||
+ | |||
+ | #img { | ||
+ | background-image: url("../File/T--USTC-Software--WEB.svg"); | ||
+ | background-size: cover; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
} | } | ||
</style> | </style> | ||
Line 590: | Line 599: | ||
$(".next").on("click", function () { | $(".next").on("click", function () { | ||
− | |||
− | |||
changeBg(); | changeBg(); | ||
changeArrow(); | changeArrow(); | ||
}); | }); | ||
− | + | ||
+ | function changeBg() { | ||
if (page1IsShow) { | if (page1IsShow) { | ||
− | $(" | + | $(".page1").fadeOut(500, function() { |
− | + | $('#mask').css({height: $(window).height(), width: $(window).width()}) | |
− | + | .fadeIn('slow', function(){ | |
+ | $('#img').css('background-image', "url(https://static.igem.org/mediawiki/2019/6/60/T--USTC-Software--web2.svg)"); | ||
+ | $('#mask').fadeOut('slow', function() { | ||
+ | $(".page2").fadeIn(); | ||
+ | }); | ||
+ | }); | ||
}); | }); | ||
page1IsShow = false; | page1IsShow = false; | ||
} else { | } else { | ||
− | $(" | + | $(".page2").fadeOut(500, function() { |
− | + | $('#mask').css({height: $(window).height(), width: $(window).width()}) | |
− | + | .fadeIn('slow', function(){ | |
+ | $('#img').css('background-image', "url(https://static.igem.org/mediawiki/2019/e/ee/T--USTC-Software--WEB.svg)"); | ||
+ | $('#mask').fadeOut('slow', function() { | ||
+ | $(".page1").fadeIn(); | ||
+ | }); | ||
+ | }); | ||
}); | }); | ||
page1IsShow = true; | page1IsShow = true; |
Revision as of 18:43, 21 October 2019
Foresyn
Lessen Your Needless Works
What You See Is What You Get
No Command Prompt Using Need
Comprehensive Customized Database
MORE