Template:CPU CHINA/common JS

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

   el: "#header",
   data: {
       menu: "img/menu/face.png", //菜单按钮
       classA: false, //一级菜单是否打开
       classB: false, //二级菜单是否打开
       isActive: "", //背景变色
       isActiveA: -1, //一级菜单悬停效果
       isActiveB: -1, //二级菜单悬停效果
       open: false, //菜单是否是打开状态
       clickon: true, //鼠标是否位于菜单上
       ifon: true, //离开是否会关闭按钮
       // 一级菜单列表
       classList: [
           "Project",
           "Parts",
           "WetLab",
           "DryLab",
           "Human Practises",
           "Team"
       ],
       // 二级菜单刘表
       classList2: [
           [{
                   text: "Background",
                   url: "",
                   num: 0
               },
               {
                   text: "Description",
                   url: "",
                   num: 1
               },
               {
                   text: "Design",
                   url: "",
                   num: 2
               },
               {
                   text: "Implemention",
                   url: "",
                   num: 3
               },
               {
                   text: "Art Design",
                   url: "",
                   num: 4
               }
           ],
           [{
               text: "parts Overview",
               url: "",
               num: 0
           }],
           [{
                   text: "Experiments",
                   url: "",
                   num: 0
               },
               {
                   text: "Results",
                   url: "",
                   num: 1
               },
               {
                   text: "Safety",
                   url: "",
                   num: 2
               },
               {
                   text: "Contribution",
                   url: "",
                   num: 3
               },
           ],
           [{
                   text: "Model",
                   url: "",
                   num: 0
               },
               {
                   text: "Mathematical Modeling",
                   url: "",
                   num: 1
               },
               {
                   text: "Molecular Modeling",
                   url: "",
                   num: 2
               },
               {
                   text: "Measurment",
                   url: "",
                   num: 3
               },
           ],
           [{
                   text: "Integrated Human Practise",
                   url: "",
                   num: 0
               },
               {
                   text: "Education and Public Engament",
                   url: "",
                   num: 1
               },
               {
                   text: "Plasticase",
                   url: "",
                   num: 2
               },
               {
                   text: "Meddy:Relight My Star",
                   url: "",
                   num: 3
               }
           ],
           [{
                   text: "Members",
                   url: "https://2021.igem.org/Team:CPU_CHINA/Team/Members",
                   num: 0
               },
               {
                   text: "Attributions",
                   url: "",
                   num: 1
               },
               {
                   text: "Partnership",
                   url: "",
                   num: 2
               },
               {
                   text: "Collabration",
                   url: "",
                   num: 3
               }
           ],
       ]
   },
   methods: {
       // 鼠标悬停到菜单按钮上
       mouseover() {
           if (!this.open) {
               debugger
               this.menu = "img/menu/zheng.gif"
               setTimeout(() => {
                   this.open = true
                   this.isActive = "menu"
                   this.classA = true
                   this.menu = "img/menu/concle.png"
               }, 1100);
           }
       },
       // 关闭菜单
       close() {
           if (this.open) {
               this.menu = "img/menu/fan.gif"
               setTimeout(() => {
                   this.open = false
                   this.isActive = ""
                   this.classB = false
                   this.classA = false
                   this.isActiveA = -1
                   this.menu = "img/menu/face.png"
               }, 1100);
           }

       },
       // 点击菜单按钮
       click() {
           debugger
           if (this.open) {
               this.close();
           } else {
               this.mouseover();
           }
       },
       // 鼠标移动到菜单上
       on() {
           this.clickon = false
           this.ifon = false
       },
       // 鼠标离开菜单
       leave() {
           setTimeout(() => {
               if (this.clickon) {
                   this.ifon = true
                   if (this.ifon && this.open) {
                       this.close();
                   } else {
                       return
                   }
               }
           }, 3000);
           this.clickon = true
       },
       // 鼠标点击空白关闭菜单
       ifclick() {
           if (this.clickon && this.open) {
               this.close();
           } else {
               return
           }
       },
       // 鼠标经过一级菜单
       classAOver(index) {
           setTimeout(() => {
               this.isActiveB = -1
               this.isActiveA = index;
               this.classB = true;
           }, 300)
       },
       // 鼠标悬停到二级菜单
       classBOver(num) {
           setTimeout(() => {
               this.isActiveB = num;
           }, 300)
       },
       // 鼠标离开二级菜单
       classBLeave(num) {
           setTimeout(() => {
               this.isActiveB = -1;
           }, 300)
       }
   }

})

// 页面滚动响应 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 >= that.offset().top - 10) {
           $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);

});