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

Revision as of 10:08, 12 September 2021

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

 el: "#header",
 data: {
   menu: "../img2/menu/T--CPU_CHINA--face.png", //菜单按钮
   isOpen: false, //背景变化
   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) {
       this.menu = "../img2/menu/T--CPU_CHINA--zheng.gif";
       this.isOpen = true;
       this.isActive = "menu";
       setTimeout(() => {
         this.open = true;
         this.classA = true;
         this.menu = "../img2/menu/T--CPU_CHINA--cancel.png";
       }, 1100);
     }
   },
   // 关闭菜单
   close() {
     if (this.open) {
       this.menu = "../img2/menu/T--CPU_CHINA--fan.gif";
       this.isActive = "";
       this.open = false;
       this.classB = false;
       this.classA = false;
       this.isActiveA = -1;
       setTimeout(() => {
         this.isOpen = false;
         this.menu = "../img2/menu/T--CPU_CHINA--face.png";
       }, 1100);
     }
   },
   // 点击菜单按钮
   click() {
     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;
     }
   },
   // 鼠标点击一级菜单
   classAClick(index) {
     this.isActiveB = -1;
     this.isActiveA = index;
     this.classB = true;
   },
   // 鼠标悬停到二级菜单
   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
 );

});