Template:CPU CHINA/common JS
// 菜单页 var header = new Vue({
el: "#header",
data: {
loading: true,
menu: "
", //菜单按钮
isOpen: false, //背景变化
classA: false, //一级菜单是否打开
classB: false, //二级菜单是否打开
isActive: "", //背景变色
isActiveA: -1, //一级菜单悬停效果
isActiveB: -1, //二级菜单悬停效果
open: false, //菜单是否是打开状态
clickon: true, //鼠标是否位于菜单上
ifon: true, //离开是否会关闭按钮
// 一级菜单列表
classList: ["Project", "Parts", "Model", "Human Practices", "Team"],
// 二级菜单刘表
classList2: [
[{
text: "Description",
url: "",
num: 0,
},
{
text: "Design",
url: "",
num: 1,
},
{
text: "Proof of Concept",
url: "",
num: 2,
},
{
text: "Proposed Implementation",
url: "",
num: 3,
},
{
text: "Art Design",
url: "https://2021.igem.org/Team:CPU_CHINA/Art",
num: 4,
},
{
text: "Lab",
url: "",
num: 5,
},
{
text: "General Safety",
url: "",
num: 6,
},
],
[{
text: "Parts Overview",
url: "",
num: 0,
},
{
text: "Contributions",
url: "",
num: 1,
},
{
text: "Engineering Success",
url: "",
num: 2,
},
{
text: "Improvement",
url: "",
num: 3,
},
],
[{
text: "Summary",
url: "",
num: 0,
},
{
text: "Mathematical Modeling",
url: "",
num: 1,
},
{
text: "Molecular Modeling",
url: "",
num: 2,
},
],
[{
text: "Summary",
url: "",
num: 0,
},
{
text: "Integrated Human Practices",
url: "",
num: 1,
},
{
text: "Education and Public Engagement",
url: "",
num: 2,
},
],
[{
text: "Members",
url: "https://2021.igem.org/Team:CPU_CHINA/Team/Members",
num: 0,
},
{
text: "Attributions",
url: "",
num: 1,
},
{
text: "Collaboration",
url: "",
num: 2,
},
{
text: "Cartnership",
url: "",
num: 3,
},
],
],
},
methods: {
// 鼠标悬停到菜单按钮上
mouseover() {
if (!this.open) {
this.menu =
"
";
this.isOpen = true;
this.isActive = "menu";
setTimeout(() => {
this.open = true;
this.classA = true;
this.menu =
"
";
this.loading = false;
}, 1100);
}
},
// 关闭菜单
close() {
if (this.open) {
this.menu =
"
";
this.isActive = "";
this.open = false;
this.classB = false;
this.classA = false;
this.isActiveA = -1;
setTimeout(() => {
this.isOpen = false;
this.menu =
"";
}, 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);
},
},
mounted() {
this.loading = true;
this.$nextTick(function () {
this.mouseover();
setTimeout(() => {
this.close();
}, 1200)
})
}
});
// 页面滚动响应 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) {
$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
);
});