Line 4: | Line 4: | ||
data: { | data: { | ||
loading: true, | loading: true, | ||
− | menu: "../ | + | menu: "https://static.igem.org/mediawiki/2021/2/22/T--CPU_CHINA--face.png", //菜单按钮 |
isOpen: false, //背景变化 | isOpen: false, //背景变化 | ||
classA: false, //一级菜单是否打开 | classA: false, //一级菜单是否打开 | ||
Line 40: | Line 40: | ||
{ | { | ||
text: "Art Design", | text: "Art Design", | ||
− | url: "", | + | url: "https://2021.igem.org/Team:CPU_CHINA/Art", |
num: 4, | num: 4, | ||
}, | }, | ||
Line 134: | Line 134: | ||
mouseover() { | mouseover() { | ||
if (!this.open) { | if (!this.open) { | ||
− | this.menu = "../ | + | this.menu = |
+ | "https://static.igem.org/mediawiki/2021/9/91/T--CPU_CHINA--zheng.gif"; | ||
this.isOpen = true; | this.isOpen = true; | ||
this.isActive = "menu"; | this.isActive = "menu"; | ||
Line 140: | Line 141: | ||
this.open = true; | this.open = true; | ||
this.classA = true; | this.classA = true; | ||
− | this.menu = "../ | + | this.menu = |
+ | "https://static.igem.org/mediawiki/2021/a/a4/T--CPU_CHINA--.png"; | ||
}, 1100); | }, 1100); | ||
} | } | ||
Line 147: | Line 149: | ||
close() { | close() { | ||
if (this.open) { | if (this.open) { | ||
− | this.menu = "../ | + | this.menu = |
+ | "https://static.igem.org/mediawiki/2021/5/5b/T--CPU_CHINA--fan.gif"; | ||
this.isActive = ""; | this.isActive = ""; | ||
this.open = false; | this.open = false; | ||
Line 155: | Line 158: | ||
setTimeout(() => { | setTimeout(() => { | ||
this.isOpen = false; | this.isOpen = false; | ||
− | this.menu = "../ | + | this.menu = |
− | + | "https://static.igem.org/mediawiki/2021/2/22/T--CPU_CHINA--face.png"; | |
}, 1100); | }, 1100); | ||
} | } | ||
Line 213: | Line 216: | ||
}, 300); | }, 300); | ||
}, | }, | ||
+ | }, | ||
+ | beforeCreate(){ | ||
+ | this.loading = true; | ||
}, | }, | ||
mounted() { | mounted() { | ||
this.$nextTick(function () { | this.$nextTick(function () { | ||
this.mouseover(); | this.mouseover(); | ||
− | + | this.close(); | |
− | + | this.loading = false; | |
− | + | ||
}) | }) | ||
} | } |
Revision as of 07:13, 13 September 2021
// 菜单页 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 = "
"; }, 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); }, }, beforeCreate(){ this.loading = true; }, mounted() { this.$nextTick(function () { this.mouseover(); this.close(); this.loading = false; }) }
});
// 页面滚动响应 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 );
});