(Created page with "// 菜单页 var header = new Vue({ el: "#header", data: { menu: "img/menu/face.png", //菜单按钮 classA: false, //一级菜单是否打开...") |
|||
Line 3: | Line 3: | ||
el: "#header", | el: "#header", | ||
data: { | data: { | ||
− | menu: " | + | menu: "https://static.igem.org/mediawiki/2021/2/22/T--CPU_CHINA--face.png", //菜单按钮 |
classA: false, //一级菜单是否打开 | classA: false, //一级菜单是否打开 | ||
classB: false, //二级菜单是否打开 | classB: false, //二级菜单是否打开 | ||
Line 145: | Line 145: | ||
if (!this.open) { | if (!this.open) { | ||
debugger | debugger | ||
− | this.menu = " | + | this.menu = "https://static.igem.org/mediawiki/2021/9/91/T--CPU_CHINA--zheng.gif" |
setTimeout(() => { | setTimeout(() => { | ||
this.open = true | this.open = true | ||
this.isActive = "menu" | this.isActive = "menu" | ||
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 157: | Line 157: | ||
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" |
setTimeout(() => { | setTimeout(() => { | ||
this.open = false | this.open = false | ||
Line 164: | Line 164: | ||
this.classA = false | this.classA = false | ||
this.isActiveA = -1 | this.isActiveA = -1 | ||
− | this.menu = " | + | this.menu = "https://static.igem.org/mediawiki/2021/2/22/T--CPU_CHINA--face.png" |
}, 1100); | }, 1100); | ||
} | } |
Revision as of 15:40, 10 September 2021
// 菜单页 var header = new Vue({
el: "#header", data: { menu: "", //菜单按钮 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 = "
" setTimeout(() => { this.open = true this.isActive = "menu" this.classA = true this.menu = "
" }, 1100); } }, // 关闭菜单 close() { if (this.open) { this.menu = "
" setTimeout(() => { this.open = false this.isActive = "" this.classB = false this.classA = false this.isActiveA = -1 this.menu = "
" }, 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);
});