Difference between revisions of "Template:CPU CHINA/common JS"

Latest revision as of 06:38, 7 December 2021

// 菜单页 var header = new Vue({

   el: "#header",
   data: {
       loading: true,
       menu: "", //菜单按钮
       isOpen: false, //背景变化
       classA: false, //一级菜单是否打开
       classB: false, //二级菜单是否打开
       isActive: "", //背景变色
       isActiveA: -1, //一级菜单悬停效果
       isActiveB: -1, //二级菜单悬停效果
       status: // 菜单的状态
       {
           "open": "",
           "close": ""
       },
       clickon: true, //鼠标是否位于菜单上
       ifon: true, //离开是否会关闭按钮
       // 一级菜单列表
       classList: ["Project", "Parts", "Model", "Human Practices", "Team","Award"],
       // 二级菜单刘表
       classList2: [
           [{
                   text: "Design",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Design",
                   num: 0,
               },
               {
                   text: "Description",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Description",
                   num: 1,
               },
               {
                   text: "Proof of Concept",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Proof_Of_Concept",
                   num: 2,
               },
               {
                   text: "Proposed Implementation",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Implementation",
                   num: 3,
               },
               {
                   text: "Art Design",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Art",
                   num: 4,
               },
               {
                   text: "Lab",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Lab",
                   num: 5,
               },
               {
                   text: "General Safety",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Safety",
                   num: 6,
               },
           ],
           [{
                   text: "Parts Overview",
                   url: "https://2021.igem.org/Team:CPU_CHINA/partsOverview",
                   num: 0,
               },
               {
                   text: "Contributions",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Contribution",
                   num: 1,
               },
               {
                   text: "Engineering Success",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Engineering",
                   num: 2,
               },
               {
                   text: "Improvement",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Improve",
                   num: 3,
               },
           ],
           [{
                   text: "Summary",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Model",
                   num: 0,
               },
               {
                   text: "Mathematical Modeling",
                   url: "https://2021.igem.org/Team:CPU_CHINA/MathematicalModeling",
                   num: 1,
               },
               {
                   text: "Molecular Modeling",
                   url: "https://2021.igem.org/Team:CPU_CHINA/MolecularModeling",
                   num: 2,
               },
           ],
           [{
                   text: "Summary",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Human_Practices",
                   num: 0,
               },
               {
                   text: "Integrated Human Practices",
                   url: "https://2021.igem.org/Team:CPU_CHINA/IntegratedHumanPractices",
                   num: 1,
               },
               {
                   text: "Education and Communication",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Communication",
                   num: 2,
               },
               {
                   text: "Entrepreneurship",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Entrepreneurship",
                   num: 3,
               },
               {
                   text: "Plasticase",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Plasticase",
                   num: 4,
               },
               {
                   text: "Meddy:Relight My Star",
                   url: "https://2021.igem.org/Team:CPU_CHINA/MeddyRelightMyStar",
                   num: 5,
               }
           ],
           [{
                   text: "Members",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Team",
                   num: 0,
               },
               {
                   text: "Attributions",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Attributions",
                   num: 1,
               },
               {
                   text: "Collaboration",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Collaborations",
                   num: 2,
               },
               {
                   text: "Partnership",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Partnership",
                   num: 3,
               },
           ],
           [
               {
                   text: "Judging Form",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Judging_Form",
                   num: 0
               },
               {
                   text: "Education",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Education",
                   num: 1
               }
           ]
       ],
   },
   methods: {
       // 鼠标悬停到菜单按钮上
       mouseover() {
           if (this.menu == this.status["close"]) {
               this.menu =
                   "";
               this.isOpen = true;
               this.isActive = "menu";
               this.classA = true;
               setTimeout(() => {
                   this.menu =
                       "";

               }, 1100);
           }
       },
       // 关闭菜单
       close() {
           if (this.menu == this.status["open"]) {
               this.menu =
                   "";
               this.isActive = "";
               this.classB = false;
               this.classA = false;
               this.isActiveA = -1;
               setTimeout(() => {
                   this.isOpen = false;
                   this.menu =
                       "";

               }, 1100);
           }
       },
       // 点击菜单按钮
       click() {
           if (this.menu == this.status["open"]) {
               this.close();
           } else if (this.menu == this.status["close"]) {
               this.mouseover();
           } else {
               return;
           }
       },
       // 鼠标移动到菜单上
       on() {
           this.clickon = false;
           this.ifon = false;
       },
       // 鼠标离开菜单
       leave() {
           setTimeout(() => {
               if (this.clickon) {
                   this.ifon = true;
                   if (this.ifon && this.menu == this.status["open"]) {
                       this.close();
                   } else {
                       return;
                   }
               }
           }, 3000);
           this.clickon = true;
       },
       // 鼠标点击空白关闭菜单
       ifclick() {
           if (this.clickon && this.menu == this.status["open"]) {
               this.close();
           } else {
               return;
           }
       },
       // 鼠标点击一级菜单
       classAClick(index) {
           this.isActiveB = -1;
           this.isActiveA = index;
           this.classB = true;
       },
       // 鼠标悬停到二级菜单
       classBOver(num) {
               this.isActiveB = num;
       },
       // 鼠标离开二级菜单
       classBLeave(num) {
               this.isActiveB = -1;
       },
   },
   beforeCreate() {
       this.loading = true;
   },
   mounted() {
       this.$nextTick(function () {
           this.mouseover();
           setTimeout(() => {
               this.close();
               this.loading = false;
           }, 1100)
       })
   }

});

// 页面滚动响应 var $navs = $("nav li"), // 导航

   $sections = $(".section"), // 模块
   $window = $(window),
   navLength = $navs.length - 1;

$window.scroll(function () {

   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
   len = navLength;
   for (; len > -1; len--) {
       var that = $sections.eq(len);
       if (scrollTop+5 >= that.offset().top) {
           $navs.removeClass("current").eq(len).addClass("current");
           break;
       }
   }

});

$navs.on("click", function (e) {

   e.preventDefault();
   $("html, body").animate({
           scrollTop: $($(this).find("a").attr("href")).offset().top,
       },
       400
   );

});