Difference between revisions of "Team:SSTi-SZGD/js/btn"

(new js btn)
m
 
(19 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
$(function(){
 
$(function(){
 +
 +
$(".btn_nav").addClass("transition");
 +
$(".btn_nav").find("*").addClass("transition");
 
 
 
if(window.location.search==""){
 
if(window.location.search==""){
−
$(".btn_language").css("background-image","url(img/language-en.png)");
+
$(".btn_language").css("background-image","url(https://static.igem.org/mediawiki/2018/b/bb/T--SSTi-SZGD--LanguageEN.png)");
 
}else{
 
}else{
−
$(".btn_language").css("background-image","url(img/language-zh.png)");
+
$(".btn_language").css("background-image","url(https://static.igem.org/mediawiki/2018/7/7a/T--SSTi-SZGD--LanguageZH.png)");
 
}
 
}
−
 
−
 
−
//滚动时保存滚动位置
 
−
$(window).scroll(function(){
 
−
if($(document).scrollTop()!=0){
 
−
sessionStorage.setItem("offsetTop",$(window).scrollTop());
 
−
}
 
−
});
 
−
//onload时，取出并滚动到上次保存位置
 
−
window.onload=function(){
 
−
var offset=sessionStorage.getItem("offsetTop");
 
−
$(document).scrollTop(offset);
 
−
};
 
−
 
 
 
 
//Translater
 
//Translater
Line 28: Line 17:
 
 
 
//dispaly
 
//dispaly
−
if($(window).height()>480&&$(window).scrollTop()!=0){
+
if($(window).height()>480&&$(window).scrollTop()>=16){
 
$(".btn_top").removeClass("fadeOutRight").addClass("fadeInRight");
 
$(".btn_top").removeClass("fadeOutRight").addClass("fadeInRight");
 
setTimeout(function(){
 
setTimeout(function(){
Line 39: Line 28:
 
},500);
 
},500);
 
}
 
}
−
+
if($(window).height()<480){
 +
$(".btn_top").css("display","none");
 +
}
 
$(window).scroll(function(){
 
$(window).scroll(function(){
−
if($(window).height()>480&&$(window).scrollTop()!=0){
+
if($(window).height()>=480&&$(window).scrollTop()>=16){
 
$(".btn_top").removeClass("fadeOutRight").addClass("fadeInRight");
 
$(".btn_top").removeClass("fadeOutRight").addClass("fadeInRight");
 
setTimeout(function(){
 
setTimeout(function(){
Line 53: Line 44:
 
}
 
}
 
});
 
});
−
if($(window).height()<=480){
+
−
$(".btn_top").css("display","none");
+
if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry|iPad/i.test(navigator.userAgent)){
 +
$(".btn_top").css("bottom","180px");
 +
$(".btn_language").css("bottom","110px");
 +
$(".btn_menu").css("bottom","40px");
 +
$(".btn_menu").css("display","block");
 +
}else{
 +
if($(window).width()<751){
 +
$(".btn_top").css("bottom","180px");
 +
$(".btn_language").css("bottom","110px");
 +
$(".btn_menu").css("bottom","40px");
 +
$(".btn_menu").css("display","block");
 +
}else{
 +
$(".btn_menu").css("display","none");
 +
$(".btn_top").css("bottom","155px");
 +
$(".btn_language").css("bottom","85px");
 +
$(".btn_nav").css("display","none");
 +
$("html,body").css({"height":"","overflow":""});
 +
var scrollTop=sessionStorage.getItem("scrollTop");
 +
if(Cbtn_nav==1){
 +
sessionStorage.setItem("offsetTop",scrollTop);
 +
$(document).scrollTop(scrollTop);
 +
Cbtn_nav=0;
 +
}
 +
if(window.location.href.indexOf("Safety")!=-1){
 +
clearInterval(Team_Time);
 +
Team_Time=setInterval("Team_ScrollRight()",3000);
 +
}
 +
}
 
}
 
}
 +
 +
 
$(window).resize(function(){
 
$(window).resize(function(){
−
if($(window).height()<=480){
+
if($(window).height()>=480&&$(window).scrollTop()>=16){
 +
$(".btn_top").removeClass("fadeOutRight").addClass("fadeInRight");
 +
setTimeout(function(){
 +
$(".btn_top").css("display","block");
 +
},500);
 +
}else{
 +
$(".btn_top").removeClass("fadeInRight").addClass("fadeOutRight");
 +
setTimeout(function(){
 +
$(".btn_top").css("display","none");
 +
},500);
 +
}
 +
if($(window).height()<480){
 
$(".btn_top").css("display","none");
 
$(".btn_top").css("display","none");
 +
}
 +
if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry|iPad/i.test(navigator.userAgent)){
 +
$(".btn_top").css("bottom","180px");
 +
$(".btn_language").css("bottom","110px");
 +
$(".btn_menu").css("bottom","40px");
 +
$(".btn_menu").css("display","block");
 +
}else{
 +
if($(window).width()<751){
 +
$(".btn_top").css("bottom","180px");
 +
$(".btn_language").css("bottom","110px");
 +
$(".btn_menu").css("bottom","40px");
 +
$(".btn_menu").css("display","block");
 +
}else{
 +
$(".btn_menu").css("display","none");
 +
$(".btn_top").css("bottom","155px");
 +
$(".btn_language").css("bottom","85px");
 +
$(".btn_nav").css("display","none");
 +
$("html,body").css({"height":"","overflow":""});
 +
var scrollTop=sessionStorage.getItem("scrollTop");
 +
if(Cbtn_nav==1){
 +
sessionStorage.setItem("offsetTop",scrollTop);
 +
$(document).scrollTop(scrollTop);
 +
Cbtn_nav=0;
 +
}
 +
if(window.location.href.indexOf("Safety")!=-1){
 +
clearInterval(Team_Time);
 +
Team_Time=setInterval("Team_ScrollRight()",3000);
 +
}
 +
}
 
}
 
}
 
});
 
});
Line 87: Line 147:
 
$(this).css("background-color","#fff");
 
$(this).css("background-color","#fff");
 
 
 +
});
 +
 +
//onload时，取出并滚动到上次保存位置
 +
window.onload=function(){
 +
var Chref=sessionStorage.getItem("Chref");
 +
var offset=sessionStorage.getItem("offsetTop");
 +
if(Chref==1){
 +
$(document).scrollTop(offset);
 +
sessionStorage.setItem("Chref",0);
 +
}
 +
};
 +
 +
//滚动时保存滚动位置
 +
$(window).scroll(function(){
 +
sessionStorage.setItem("offsetTop",$(window).scrollTop());
 
});
 
});
 
 
 
$(".btn_language").click(function(){
 
$(".btn_language").click(function(){
 
 
 +
if(Cbtn_nav==1){
 +
var scrollTop=sessionStorage.getItem("scrollTop");
 +
sessionStorage.setItem("offsetTop",scrollTop);
 +
}else{
 +
sessionStorage.setItem("offsetTop",$(window).scrollTop());
 +
}
 +
sessionStorage.setItem("Chref",1);
 
if(window.location.search==""){
 
if(window.location.search==""){
 
window.location.href+="?lang=cn";
 
window.location.href+="?lang=cn";
Line 109: Line 191:
 
$(this).css("background-color","#eee");
 
$(this).css("background-color","#eee");
 
Cbtn_nav=1;
 
Cbtn_nav=1;
 +
setTimeout(function(){
 +
$("html,body").css({"height":"100%","overflow":"hidden"});
 +
},1200);
 +
sessionStorage.setItem("scrollTop",$(window).scrollTop());
 
}else{
 
}else{
 
$(".btn_nav").removeClass("fadeInDownBig").addClass("fadeOutUpBig");
 
$(".btn_nav").removeClass("fadeInDownBig").addClass("fadeOutUpBig");
Line 116: Line 202:
 
$(this).css("background-color","#fff");
 
$(this).css("background-color","#fff");
 
Cbtn_nav=0;
 
Cbtn_nav=0;
 +
$("html,body").css({"height":"","overflow":""});
 +
var scrollTop=sessionStorage.getItem("scrollTop");
 +
$(document).scrollTop(scrollTop);
 
}
 
}
 
 
Line 140: Line 229:
 
$(this).css("background-color","#fff");
 
$(this).css("background-color","#fff");
 
});
 
});
−
 
 
 
 
 
 
});
 
});

Latest revision as of 17:05, 4 November 2018

$(function(){

$(".btn_nav").addClass("transition"); $(".btn_nav").find("*").addClass("transition");

if(window.location.search==""){ $(".btn_language").css("background-image","url(T--SSTi-SZGD--LanguageEN.png)"); }else{ $(".btn_language").css("background-image","url(T--SSTi-SZGD--LanguageZH.png)"); }

//Translater var tran = new Translater({ lang:"en" });


//dispaly if($(window).height()>480&&$(window).scrollTop()>=16){ $(".btn_top").removeClass("fadeOutRight").addClass("fadeInRight"); setTimeout(function(){ $(".btn_top").css("display","block"); },500); }else{ $(".btn_top").removeClass("fadeInRight").addClass("fadeOutRight"); setTimeout(function(){ $(".btn_top").css("display","none"); },500); } if($(window).height()<480){ $(".btn_top").css("display","none"); } $(window).scroll(function(){ if($(window).height()>=480&&$(window).scrollTop()>=16){ $(".btn_top").removeClass("fadeOutRight").addClass("fadeInRight"); setTimeout(function(){ $(".btn_top").css("display","block"); },500); }else{ $(".btn_top").removeClass("fadeInRight").addClass("fadeOutRight"); setTimeout(function(){ $(".btn_top").css("display","none"); },500); } });

if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry|iPad/i.test(navigator.userAgent)){ $(".btn_top").css("bottom","180px"); $(".btn_language").css("bottom","110px"); $(".btn_menu").css("bottom","40px"); $(".btn_menu").css("display","block"); }else{ if($(window).width()<751){ $(".btn_top").css("bottom","180px"); $(".btn_language").css("bottom","110px"); $(".btn_menu").css("bottom","40px"); $(".btn_menu").css("display","block"); }else{ $(".btn_menu").css("display","none"); $(".btn_top").css("bottom","155px"); $(".btn_language").css("bottom","85px"); $(".btn_nav").css("display","none"); $("html,body").css({"height":"","overflow":""}); var scrollTop=sessionStorage.getItem("scrollTop"); if(Cbtn_nav==1){ sessionStorage.setItem("offsetTop",scrollTop); $(document).scrollTop(scrollTop); Cbtn_nav=0; } if(window.location.href.indexOf("Safety")!=-1){ clearInterval(Team_Time); Team_Time=setInterval("Team_ScrollRight()",3000); } } }


$(window).resize(function(){ if($(window).height()>=480&&$(window).scrollTop()>=16){ $(".btn_top").removeClass("fadeOutRight").addClass("fadeInRight"); setTimeout(function(){ $(".btn_top").css("display","block"); },500); }else{ $(".btn_top").removeClass("fadeInRight").addClass("fadeOutRight"); setTimeout(function(){ $(".btn_top").css("display","none"); },500); } if($(window).height()<480){ $(".btn_top").css("display","none"); } if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry|iPad/i.test(navigator.userAgent)){ $(".btn_top").css("bottom","180px"); $(".btn_language").css("bottom","110px"); $(".btn_menu").css("bottom","40px"); $(".btn_menu").css("display","block"); }else{ if($(window).width()<751){ $(".btn_top").css("bottom","180px"); $(".btn_language").css("bottom","110px"); $(".btn_menu").css("bottom","40px"); $(".btn_menu").css("display","block"); }else{ $(".btn_menu").css("display","none"); $(".btn_top").css("bottom","155px"); $(".btn_language").css("bottom","85px"); $(".btn_nav").css("display","none"); $("html,body").css({"height":"","overflow":""}); var scrollTop=sessionStorage.getItem("scrollTop"); if(Cbtn_nav==1){ sessionStorage.setItem("offsetTop",scrollTop); $(document).scrollTop(scrollTop); Cbtn_nav=0; } if(window.location.href.indexOf("Safety")!=-1){ clearInterval(Team_Time); Team_Time=setInterval("Team_ScrollRight()",3000); } } } });


//hover $(".btn_top").hover(function(){ $(this).css("background-color","#eee"); },function(){ $(this).css("background-color","#fff"); }); $(".btn_language").hover(function(){ $(this).css("background-color","#eee"); },function(){ $(this).css("background-color","#fff"); }); $(".btn_menu").hover(function(){ $(this).css("background-color","#eee"); },function(){ $(this).css("background-color","#fff"); });


//click $(".btn_top").click(function(){

$("html,body").stop().animate({scrollTop: '0px'},800); $(this).css("background-color","#fff");

});

//onload时，取出并滚动到上次保存位置 window.onload=function(){ var Chref=sessionStorage.getItem("Chref"); var offset=sessionStorage.getItem("offsetTop"); if(Chref==1){ $(document).scrollTop(offset); sessionStorage.setItem("Chref",0); } };

//滚动时保存滚动位置 $(window).scroll(function(){ sessionStorage.setItem("offsetTop",$(window).scrollTop()); });

$(".btn_language").click(function(){

if(Cbtn_nav==1){ var scrollTop=sessionStorage.getItem("scrollTop"); sessionStorage.setItem("offsetTop",scrollTop); }else{ sessionStorage.setItem("offsetTop",$(window).scrollTop()); } sessionStorage.setItem("Chref",1); if(window.location.search==""){ window.location.href+="?lang=cn"; }else{ window.location.href=""+window.location.href.split('?')[0]; }

});

var Cbtn_nav=0; $(".btn_menu").click(function(){

if(Cbtn_nav==0){ $(".btn_nav").removeClass("fadeOutUpBig").addClass("fadeInDownBig"); setTimeout(function(){ $(".btn_nav").css("display","block"); },500); $(this).css("background-color","#eee"); Cbtn_nav=1; setTimeout(function(){ $("html,body").css({"height":"100%","overflow":"hidden"}); },1200); sessionStorage.setItem("scrollTop",$(window).scrollTop()); }else{ $(".btn_nav").removeClass("fadeInDownBig").addClass("fadeOutUpBig"); setTimeout(function(){ $(".btn_nav").css("display","none"); },500); $(this).css("background-color","#fff"); Cbtn_nav=0; $("html,body").css({"height":"","overflow":""}); var scrollTop=sessionStorage.getItem("scrollTop"); $(document).scrollTop(scrollTop); }

});


//touch $(".btn_top").on("touchstart",function(){ $(this).css("background-color","#eee"); }); $(".btn_top").on("touchend",function(){ $(this).css("background-color","#fff"); }); $(".btn_language").on("touchstart",function(){ $(this).css("background-color","#eee"); }); $(".btn_language").on("touchend",function(){ $(this).css("background-color","#fff"); }); $(".btn_menu").on("touchstart",function(){ $(this).css("background-color","#eee"); }); $(".btn_menu").on("touchend",function(){ $(this).css("background-color","#fff"); });


});