问题描述:
使用标准文档流进行布局,鼠标会频繁触发 mouseenter 和 mouseleave 事件,无法正常修改 spsan 的位置。
该问题需将文字(即 li)置于图片(即 span)之上,防止触发 mouseleave 事件。
可以将最外层的大盒子采用绝对定位进行布局,在大盒子内部指定 z-index 指定重叠层级。
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>筋斗云案例</title>
<link rel="stylesheet" href="css/cloud.css">
<script src="js/animate.js"></script>
<script src="js/cloud.js"></script>
</head>
<body>
<div class="c-nav">
<span class="cloud"></span>
<ul>
<li><a class="current" href="javascript:;">师资力量</a></li>
<li><a href="javascript:;">活动策划</a></li>
<li><a href="javascript:;">企业文化</a></li>
<li><a href="javascript:;">招聘信息</a></li>
<li><a href="javascript:;">公司简介</a></li>
<li><a href="javascript:;">谁是佩奇</a></li>
<li><a href="javascript:;">我是佩奇</a></li>
</ul>
</div>
</body>
</html>
window.addEventListener('load', function () {
// 获取元素
let cloud = document.querySelector('.cloud');
let li_lists = document.querySelectorAll('.c-nav ul li');
let cloud_origin_position = cloud.offsetLeft;
for (let i = 0; i < li_lists.length; i++) {
li_lists[i].addEventListener('mouseenter', function () {
easeAnimate(cloud, this.offsetLeft);
});
li_lists[i].addEventListener('mouseleave', function () {
easeAnimate(cloud, cloud_origin_position);
});
li_lists[i].addEventListener('click', function () {
cloud_origin_position = cloud.offsetLeft;
})
}
});
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
body {
background-color: black;
}
/* 把主体设置为绝对定位,*/
/* 同时将 span 的 z-index 设置为 -1,li 的 z-index 设置为 1,*/
/* 即将文字置于图片之上,防止鼠标频繁交替触发 mouseenter 和 mouseleave 事件 */
.c-nav {
position: absolute;
top: 80px;
left: 50%;
transform: translateX(-50%);
}
.c-nav li {
float: left;
margin: 0 20px;
}
.c-nav li a {
color: red;
font-size: 23px;
text-decoration: none;
z-index: 1;
}
.cloud {
position: absolute;
width: 100px;
height: 50px;
background: url("../images/cloud.png") no-repeat;
background-size: 100px 50px;
z-index: -1;
}