html:
<div class="top" id="top"></div>
<div class="nav" id="nav">
<div class="img1" @click="toroute(1)"></div>
<div class="img2" @click="toroute(2)"></div>
<div class="img3" @click="toroute(3)"></div>
</div>
css:
// 导航
.nav {
display: flex; /*固定定位*/
justify-content: center; /*元素以容器右边缘为基准,一个挨着一个对齐*/
align-items: center; /*让文字垂直居中*/
width: 100%;
height: 98px;
font-size: 2em;
transition: top .4s linear; /*导航栏过渡出现和隐藏*/
position: fixed; /* 绝对定位,不管滚动条上下滚动都在相应的位置*/
top: -98px; /*隐藏导航栏*/
left: 0;
background-image: url('....');
background-size: 100% 98px;
background-repeat: no-repeat;
z-index: 2000;
.img1 {
width: 50px;
height: 50px;
margin-right: 70px;
background-image: url('....);
background-size: 50px 50px;
background-repeat: no-repeat;
cursor: pointer;
}
.img2 {
width: 46px;
height: 48px;
margin-right: 70px;
background-image: url('....');
background-size: 46px 48px;
background-repeat: no-repeat;
cursor: pointer;
}
.img3 {
width: 44px;
height: 50px;
margin-right: 40px;
background-image: url('....');
background-size: 44px 50px;
background-repeat: no-repeat;
cursor: pointer;
}
}
.top {
position: fixed; /*固定定位*/
width: 100%;
height: 20px;
right: 0;
top: 0;
}
js:
注意:
当鼠标移入DIV内部的Img或其它元素上时,内部元素的mouseover事件被触发。但是再次将鼠标移动到DIV内部的另一个内部元素时,却会发现首先被触发的是DIV的mouseout事件,紧接着才是当前这个元素的mouseover事件。
解决:使用setTimeout。
当鼠标触发外层的mouseout事件时,开始计时Settimeout,一段时间后再去执行mouseout需要执行的函数;这段时间是为了判断鼠标是否移动到了其内部元素。
当鼠标mouseover到了内部元素上时,这时候会触发它本身以及外层的mouseover事件,这时需先清除鼠标移出事件的函数。
// 导航栏
nav () {
// 获取导航栏、按量、顶部div的元素
const nav = document.getElementById('nav')
const top = document.getElementById('top')
const img1 = document.getElementsByClassName('img1')[0]
const img2 = document.getElementsByClassName('img2')[0]
const img3 = document.getElementsByClassName('img3')[0]
let timer = null
// console.log(nav, img1);
// 鼠标移入div后触发的事件
top.onmouseover = function () {
nav.style.top = '0px'
}
// 鼠标移入导航栏触发的事件 当触发onmouseover事件时,需先清除鼠标移出事件的函数
nav.onmouseover = function () {
clearTimeout(timer)
nav.style.top = '0px'
}
img1.onmouseover = function () {
clearTimeout(timer)
nav.style.top = '0px'
}
img2.onmouseover = function () {
clearTimeout(timer)
nav.style.top = '0px'
}
img3.onmouseover = function () {
clearTimeout(timer)
nav.style.top = '0px'
}
// 鼠标移出导航栏后触发的事件
nav.onmouseout = function () {
// 定时器函数
timer = setTimeout(function () {
nav.style.top = '-98px'
}, 500)
}
},
// 导航栏跳转
toroute (target) {
switch (target) {
case 1:
this.$router.push('/')
break;
case 2:
this.$router.push('/overview')
break;
case 3:
this.$router.push('/traffic')
break;
}
},