Difference between revisions of "Template:BNU-China/Javascript/index"

(Created page with "var navWidth; var navFontSize; var navTop; var idStoryMax=8; var idStory=0; $(document).ready(function(){ $("#top_title").hide(); $("#sideMenu").hide(); <!--首页故事-->...")
 
 
(23 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
var navWidth;
+
var navWidth;
−
var navFontSize;
+
var navFontSize;
−
var navTop;
+
var navTop;
−
var idStoryMax=8;
+
$("#w_navMenuContent").ready(function(){
−
var idStory=0;
+
if($(window).innerWidth()<480){
−
$(document).ready(function(){
+
$("#w_navMenuContent").hide();
−
$("#top_title").hide();
+
−
$("#sideMenu").hide();
+
−
<!--首页故事-->
+
−
if($(window).width()>=767)
+
−
{
+
−
$(".w_indexPhoto").hide();
+
−
$("#story0").show();
+
−
}
+
−
$("#storyArrow").click(function(){
+
−
if(idStory<idStoryMax){
+
−
$("html,body").animate({"scrollTop":0},800);
+
−
$("#story"+String(idStory)).slideUp(800,'swing');
+
−
idStory=idStory+1;
+
−
$("#story"+String(idStory)).show();
+
−
}
+
−
});
+
−
 
+
−
$("#storyArrow").hover(function(){
+
−
$(this).animate({"top":"+=2%"},500,"swing");
+
−
},function(){
+
−
$(this).animate({"top":"-=2%"},500,"swing");
+
−
});
+
−
 
+
−
function handleMouseScroll(e) {
+
−
if($(window).width()>=767)
+
−
{
+
−
if(e.wheelDelta<0){
+
−
if(idStory<idStoryMax){
+
−
if($(document).scrollTop()>=0.8*($(document).height()-$(window).height()))
+
−
{
+
−
window.onmousewheel =0;
+
−
$("html,body").animate({"scrollTop":0},800);
+
−
$("#story"+String(idStory)).slideUp(800,'swing',function(){window.onmousewheel = handleMouseScroll;});
+
−
idStory=idStory+1;
+
−
$("#story"+String(idStory)).show();
+
−
if(idStory==idStoryMax) $("#storyArrow").hide();
+
−
}
+
 
}
 
}
−
}
+
});
−
else{
+
$(document).ready(function(){
−
if($(window).scrollTop()==0)
+
$("#w_Project").hover(function(){
−
{
+
      $(this).append('<div style="position:absolute;display:inline;width:100%;left:0px;"><ul style="background-color:rgba(224,64,28,0.6);"><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/Description ">Background</a></li><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/Design ">Design</a></li><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/Demonstrate">Results</a></li></ul></div>');
−
if(idStory>0)
+
      $("#w_nav>ul>li>div").css({"paddingTop":-1*parseFloat($("#w_nav>ul").css("top"))});
−
{
+
    },function(){
−
window.onmousewheel =0;
+
      $("#w_nav>ul>li>div").remove();
−
$("html,body").animate({"scrollTop":0},800);
+
    });
−
idStory=idStory-1;
+
    $("#w_Modeling").hover(function(){
−
$("#story"+String(idStory)).slideDown(800,'swing',function(){$("#story"+String(idStory+1)).hide();window.onmousewheel = handleMouseScroll;});
+
      $(this).append('<div style="position:absolute;display:inline;width:100%;left:0px;"><ul style="background-color:rgba(224,64,28,0.6);"><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/Model">Overview</a></li><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/Model/microtubule">Microtubule</a></li><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/Model/flagellin">Flagellar Filament</a></li></ul></div>');
−
}
+
      $("#w_nav>ul>li>div").css({"paddingTop":-1*parseFloat($("#w_nav>ul").css("top"))});
−
if(idStory<idStoryMax) $("#storyArrow").show();
+
    },function(){
 +
      $("#w_nav>ul>li>div").remove();
 +
    });
 +
    $("#w_Practice").hover(function(){
 +
      $(this).append('<div style="position:absolute;display:inline;width:100%;left:0px;"><ul style="background-color:rgba(224,64,28,0.6);"><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/HP">Overview</a></li><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/HP/Silver">Silver</a></li><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/HP/Gold_Integrated">Gold</a></li><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/Engagement">Engagement</a></li></ul></div>');
 +
      $("#w_nav>ul>li>div").css({"paddingTop":-1*parseFloat($("#w_nav>ul").css("top"))});
 +
    },function(){
 +
      $("#w_nav>ul>li>div").remove();
 +
    });
 +
    $("#w_Achievement").hover(function(){
 +
      $(this).append('<div style="position:absolute;display:inline;width:100%;left:0px;"><ul style="background-color:rgba(224,64,28,0.6);"><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/Judging">Judging Criteria</a></li><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/Parts">Parts</a></li><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/Collaborations">Collaboration</a></li><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/Improve">Improvement</a></li></ul></div>');
 +
      $("#w_nav>ul>li>div").css({"paddingTop":-1*parseFloat($("#w_nav>ul").css("top"))});
 +
    },function(){
 +
      $("#w_nav>ul>li>div").remove();
 +
    });
 +
    $("#w_Lab").hover(function(){
 +
      $(this).append('<div style="position:absolute;display:inline;width:100%;left:0px;"><ul style="background-color:rgba(224,64,28,0.6);"><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/Team">Team</a></li><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/Notebook">Notebook</a></li><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/Experiments">Protocol</a></li><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/Attributions">Attributions</a></li><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/Acknowlegement">Acknowlegement</a></li></ul></div>');
 +
      $("#w_nav>ul>li>div").css({"paddingTop":-1*parseFloat($("#w_nav>ul").css("top"))});
 +
    },function(){
 +
      $("#w_nav>ul>li>div").remove();
 +
    });
 +
    $("#w_Safety").hover(function(){
 +
      $(this).append('<div style="position:absolute;display:inline;width:100%;left:0px;"><ul style="background-color:rgba(224,64,28,0.6);"><li><a class="w_a" href="https://2017.igem.org/Team:BNU-China/Safety">Safety</a></li></ul></div>');
 +
      $("#w_nav>ul>li>div").css({"paddingTop":-1*parseFloat($("#w_nav>ul").css("top"))});
 +
    },function(){
 +
      $("#w_nav>ul>li>div").remove();
 +
    });
 +
<!--导航栏自适应-->
 +
$("#top_title").hide();
 +
$("#sideMenu").hide();
 +
if($(window).width()>=480){
 +
$("#w_nav>div").hide();
 
}
 
}
−
}
+
if($(window).width()<480){
−
}
+
$("#w_nav>ul").hide();
−
}
+
$("#w_nav>div>ul").hide();
−
// window.onmousewheel = document.onmousewheel = handleMouseScroll;
+
}
−
window.onmousewheel = handleMouseScroll;
+
$("#w_nav>ul").css({"top":$(window).width()/1280*(-41)});
 +
$("#w_nav>ul>li>a").css({"width":$(window).width()/7-10,"font-size":$(window).width()/1280*25,"top":0});
 +
navWidth=$(window).width();
 +
navFontSize=$("#w_nav>ul>li>a").css("font-size");
 +
navTop=$("#w_nav>ul").css("top");
  
−
if($(window).width()<=767){
+
$("#w_nav>div>p").click(function(){
−
$("#storyArrow").hide();
+
$("#w_nav>div>ul").slideToggle();
−
}
+
});
−
<!--导航栏自适应-->
+
<!--侧栏自适应-->
−
if($(window).width()>=480){
+
/* $("#w_menu>li>ul").hide().click(function(event){
−
$("#w_nav>div").hide();
+
event.stopPropagation();
−
}
+
});
−
if($(window).width()<480){
+
−
$("#w_nav>ul").hide();
+
−
$("#w_nav>div>ul").hide();
+
−
}
+
−
$("#w_nav>ul>li>a").css({"width":$(window).width()/7-10,"font-size":$(window).width()/1280*25});
+
−
$("#w_nav>ul").css({"top":$(window).width()/1280*(-55)});
+
−
$("#w_nav>div>ul").css({"top":$(window).width()/1280*(-55)});
+
−
navWidth=$(window).width();
+
−
navFontSize=$("#w_nav>ul>li>a").css("font-size");
+
−
navTop=$("#w_nav>ul").css("top");
+
  
−
$("#w_nav>div>p").click(function(){
+
$("#w_menu>li").click(function(){
−
$("#w_nav>div>ul").slideToggle();
+
var menuFlag=true;
−
});
+
if($(this).find('ul').is(":visible"))
−
<!--侧栏自适应-->
+
menuFlag=false;
−
$("#w_menu>li>ul").hide().click(function(event){
+
$("#w_menu>li>ul:visible").slideUp();
−
event.stopPropagation();
+
if(menuFlag)
−
});
+
$(this).find('ul').slideToggle();
 +
});*/
 +
$("#w_menu>li>ul").hide();
 +
$("#w_menu>li>ul:eq(0)").show();
 +
$("#w_menu>li>ul>li>p").click(function(){
 +
var x=$(this).data("id");
 +
$("html,body").animate({scrollTop:$(x).offset().top-$("#w_nav").height()},500);
 +
});
 +
$("#w_Panel").height(document.documentElement.clientHeight);
 +
<!--悟空眼睛-->
 +
$(document).mousemove(function(e){
 +
          var x=$("#eye").width()/2;
 +
          var y=$("#eye").height()/2;
 +
          $("#eye").css({"left":parseFloat(String((e.pageX-x)/100)),"top":parseFloat(String((e.pageY-$(window).scrollTop()-y)/100))});
 +
        });
  
−
$("#w_menu>li").click(function(){
+
});
−
var menuFlag=true;
+
$(document).on('touchmove',function(e) {
−
if($(this).find('ul').is(":visible"))
+
var x=$("#eye").width()/2;
−
menuFlag=false;
+
          var y=$("#eye").height()/2;
−
$("#w_menu>li>ul:visible").slideUp();
+
          $("#eye").css({"left":parseFloat(String((e.pageX-x)/100)),"top":parseFloat(String((e.pageY-$(window).scrollTop()-y)/100))});
−
if(menuFlag)
+
});
−
$(this).find('ul').slideToggle();
+
<!--导航栏首页故事自适应-->
−
});
+
$(window).resize(function(){
−
 
+
$("#w_Panel").height(document.documentElement.clientHeight);
−
$("#w_menu>li>ul>li>p").click(function(){
+
if($(window).width()>=480){
−
var x=$(this).data("id");
+
$("#w_nav>div").hide();
−
$('html').animate({scrollTop:$(x).offset().top-$("#w_nav").height()*2/3},500);
+
$("#w_nav>ul").show();
−
});
+
$("#w_nav>ul>li>a").css({"width":$(window).width()/7-10,"font-size":parseFloat(navFontSize)*parseFloat(String($(window).width()))/parseFloat(String(navWidth))});
−
<!--悟空眼睛-->
+
$("#w_nav>ul").css({"top":parseFloat(navTop)*parseFloat(String($(window).width()))/parseFloat(String(navWidth))});
−
$(document).mousemove(function(e){
+
navWidth=$(window).width();
−
  var x=$("#eye").width()/2;
+
navFontSize=$("#w_nav>ul>li>a").css("font-size");
−
  var y=$("#eye").height()/2;
+
navTop=$("#w_nav>ul").css("top");
−
  $("#eye").css({"left":parseFloat(String((e.pageX-x)/100)),"top":parseFloat(String((e.pageY-$(window).scrollTop()-y)/100))});
+
}
−
});
+
else{
−
 
+
$("#w_nav>ul").hide();
−
});
+
$("#w_nav>div").show();
−
<!--导航栏首页故事自适应-->
+
$("#w_nav>div>ul").hide();
−
$(window).resize(function(){
+
}
−
if($(window).width()<=767){
+
});
−
$("#storyArrow").hide();
+
−
$(".w_indexPhoto").show();
+
−
}
+
−
else{
+
−
$("#storyArrow").show();
+
−
$(".w_indexPhoto").hide();
+
−
$("#story"+String(idStory)).show();
+
−
}
+
−
if($(window).width()>=480){
+
−
$("#w_nav>div").hide();
+
−
$("#w_nav>ul").show();
+
−
$("#w_nav>ul>li>a").css({"width":$(window).width()/7-10,"font-size":parseFloat(navFontSize)*parseFloat(String($(window).width()))/parseFloat(String(navWidth)),"top":parseFloat(navTop)*parseFloat(String($(window).width()))/parseFloat(String(navWidth))});
+
−
$("#w_nav>ul").css({"top":parseFloat(navTop)*parseFloat(String($(window).width()))/parseFloat(String(navWidth))});
+
−
$("#w_nav>div>ul").css({"top":parseFloat(navTop)*parseFloat(String($(window).width()))/parseFloat(String(navWidth))});
+
−
navWidth=$(window).width();
+
−
navFontSize=$("#w_nav>ul>li>a").css("font-size");
+
−
navTop=$("#w_nav>ul").css("top");
+
−
}
+
−
else{
+
−
$("#w_nav>ul").hide();
+
−
$("#w_nav>div").show();
+
−
$("#w_nav>div>ul").hide();
+
−
}
+
−
 
+
−
 
+
−
});
+

Latest revision as of 10:01, 1 November 2017

var navWidth; var navFontSize; var navTop; $("#w_navMenuContent").ready(function(){ if($(window).innerWidth()<480){ $("#w_navMenuContent").hide(); } }); $(document).ready(function(){ $("#w_Project").hover(function(){

$(this).append('
'); 
     $("#w_nav>ul>li>div").css({"paddingTop":-1*parseFloat($("#w_nav>ul").css("top"))});
   },function(){
     $("#w_nav>ul>li>div").remove();
   });
   $("#w_Modeling").hover(function(){
$(this).append('
'); 
     $("#w_nav>ul>li>div").css({"paddingTop":-1*parseFloat($("#w_nav>ul").css("top"))});
   },function(){
     $("#w_nav>ul>li>div").remove();
   });
   $("#w_Practice").hover(function(){
$(this).append('
'); 
     $("#w_nav>ul>li>div").css({"paddingTop":-1*parseFloat($("#w_nav>ul").css("top"))});
   },function(){
     $("#w_nav>ul>li>div").remove();
   });
   $("#w_Achievement").hover(function(){
$(this).append('
'); 
     $("#w_nav>ul>li>div").css({"paddingTop":-1*parseFloat($("#w_nav>ul").css("top"))});
   },function(){
     $("#w_nav>ul>li>div").remove();
   });
   $("#w_Lab").hover(function(){
$(this).append('
'); 
     $("#w_nav>ul>li>div").css({"paddingTop":-1*parseFloat($("#w_nav>ul").css("top"))});
   },function(){
     $("#w_nav>ul>li>div").remove();
   });
   $("#w_Safety").hover(function(){
$(this).append('
'); 
     $("#w_nav>ul>li>div").css({"paddingTop":-1*parseFloat($("#w_nav>ul").css("top"))});
   },function(){
     $("#w_nav>ul>li>div").remove();
   });

$("#top_title").hide(); $("#sideMenu").hide(); if($(window).width()>=480){ $("#w_nav>div").hide(); } if($(window).width()<480){ $("#w_nav>ul").hide(); $("#w_nav>div>ul").hide(); } $("#w_nav>ul").css({"top":$(window).width()/1280*(-41)}); $("#w_nav>ul>li>a").css({"width":$(window).width()/7-10,"font-size":$(window).width()/1280*25,"top":0}); navWidth=$(window).width(); navFontSize=$("#w_nav>ul>li>a").css("font-size"); navTop=$("#w_nav>ul").css("top");

$("#w_nav>div>p").click(function(){ $("#w_nav>div>ul").slideToggle(); }); /* $("#w_menu>li>ul").hide().click(function(event){ event.stopPropagation(); });

$("#w_menu>li").click(function(){ var menuFlag=true; if($(this).find('ul').is(":visible")) menuFlag=false; $("#w_menu>li>ul:visible").slideUp(); if(menuFlag) $(this).find('ul').slideToggle(); });*/ $("#w_menu>li>ul").hide(); $("#w_menu>li>ul:eq(0)").show(); $("#w_menu>li>ul>li>p").click(function(){ var x=$(this).data("id"); $("html,body").animate({scrollTop:$(x).offset().top-$("#w_nav").height()},500); }); $("#w_Panel").height(document.documentElement.clientHeight); $(document).mousemove(function(e){ 

         var x=$("#eye").width()/2;
         var y=$("#eye").height()/2;
         $("#eye").css({"left":parseFloat(String((e.pageX-x)/100)),"top":parseFloat(String((e.pageY-$(window).scrollTop()-y)/100))});
       });

}); $(document).on('touchmove',function(e) { var x=$("#eye").width()/2; 

         var y=$("#eye").height()/2;
         $("#eye").css({"left":parseFloat(String((e.pageX-x)/100)),"top":parseFloat(String((e.pageY-$(window).scrollTop()-y)/100))});

}); $(window).resize(function(){ $("#w_Panel").height(document.documentElement.clientHeight); if($(window).width()>=480){ $("#w_nav>div").hide(); $("#w_nav>ul").show(); $("#w_nav>ul>li>a").css({"width":$(window).width()/7-10,"font-size":parseFloat(navFontSize)*parseFloat(String($(window).width()))/parseFloat(String(navWidth))}); $("#w_nav>ul").css({"top":parseFloat(navTop)*parseFloat(String($(window).width()))/parseFloat(String(navWidth))}); navWidth=$(window).width(); navFontSize=$("#w_nav>ul>li>a").css("font-size"); navTop=$("#w_nav>ul").css("top"); } else{ $("#w_nav>ul").hide(); $("#w_nav>div").show(); $("#w_nav>div>ul").hide(); } });