<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<link href="css/style.css">
<style>
body {
background: #ededed;
padding: 0 20px;
margin: 0;
font-family: 'Open Sans', Arial, sans-serif;
}
h1 {
text-align: center;
margin: 80px 0;
}
.mynav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style-type: none;
padding: 0;
}
.mynav li:not(:last-child) {
margin-right: 20px;
}
.mynav a {
display: block;
font-size: 20px;
color: black;
text-decoration: none;
padding: 7px 15px;
}
.target {
position: absolute;
border-bottom: 4px solid transparent;
z-index: -1;
-webkit-transform: translateX(-60px);
transform: translateX(-60px);
}
.mynav a,
.target {
-webkit-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}</style>
</header>
<body>
<nav class="mynav">
<ul>
<li class=""><a href="" style="opacity: 0.25;">Home</a></li>
<li class=""><a href="" style="opacity: 0.25;">About</a></li>
<li class="active"><a href="" style="opacity: 1;">Company</a></li>
<li class=""><a href="" style="opacity: 0.25;">Work</a></li>
<li class=""><a href="" style="opacity: 0.25;">Clients</a></li>
<li class=""><a href="" style="opacity: 0.25;">Contact</a></li>
</ul>
</nav>
<span class="target"></span>
<script type="text/javascript">
"use strict"; //严格模式的限制
(function () {
var target = document.querySelector(".target");
var links = document.querySelectorAll(".mynav a");
var colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"];
function mouseenterFunc() {
if (!this.parentNode.classList.contains("active")) { //contains()判断li类中是否包含active
for (var i = 0; i < links.length; i++) {
if (links[i].parentNode.classList.contains("active")) {
links[i].parentNode.classList.remove("active");
}
links[i].style.opacity = "0.25";
}
this.parentNode.classList.add("active");
this.style.opacity = "1";
var width = this.getBoundingClientRect().width;
var height = this.getBoundingClientRect().height;
var left = this.getBoundingClientRect().left + window.pageXOffset;
var top = this.getBoundingClientRect().top + window.pageYOffset;
var color = colors[Math.floor(Math.random() * colors.length)]; //floor(1.5)返回小于等于1.5的最大整数，random()返回0（包括）到1的一个随机数
target.style.width = width + "px";
target.style.height = height + "px";
target.style.left = left + "px";
target.style.top = top + "px";
target.style.borderColor = color;
target.style.transform = "none";
}
}
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function (e) {
return e.preventDefault();
});
links[i].addEventListener("mouseenter", mouseenterFunc);
}
function resizeFunc() {
var active = document.querySelector(".mynav li.active");
if (active) {
var left = active.getBoundingClientRect().left + window.pageXOffset;
var top = active.getBoundingClientRect().top + window.pageYOffset;
target.style.left = left + "px";
target.style.top = top + "px";
}
}
window.addEventListener("resize", resizeFunc);
})();
</script>
</body>
</html>
