<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
}
.main {
position: relative;
width: 1200px;
height: 40px;
background-color: white;
margin: 50px auto;
line-height: 40px;
border-radius: 10px;
}
.main ul {
display: flex;
justify-content: space-evenly;
}
.main ul li {
list-style: none;
width: 150px;
height: 40px;
z-index: 999;
text-align: center;
}
.cloud {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 150px;
height: 40px;
background-color: yellowgreen;
border-radius: 10px;
}
.licolor {
color: white !important;
}
</style>
</head>
<body>
<div class="main">
<span class="cloud"></span>
<ul>
<li>首页新闻</li>
<li>师资力量</li>
<li>活动策划</li>
<li>企业文化</li>
<li>招聘信息</li>
<li>公司简介</li>
<li>上海校区</li>
<li>广州校区</li>
</ul>
</div>
<script src="animation.js"></script>
<script>
var cloud = document.querySelector('.cloud');
var main = document.querySelector('.main');
var lis = main.querySelectorAll('li');
var current = 0;
var pp = 0;
lis[0].style.color = 'white';
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener('mouseenter', function() {
for (var i = 0; i < lis.length; i++) {
lis[i].style.color = 'black';
}
animation(cloud, this.offsetLeft)
this.style.color = 'white';
})
lis[i].setAttribute('index', i);
lis[i].addEventListener('mouseleave', function() {
animation(cloud, current);
for (var i = 0; i < lis.length; i++) {
lis[i].style.color = 'black';
}
var index = this.getAttribute('index');
if (pp != index || pp == index) {
lis[pp].style.color = 'white';
}
console.log(pp);
console.log(index);
})
lis[i].addEventListener('click', function() {
current = this.offsetLeft;
pp = current / 150;
// this.style.color = 'white';
this.style.className = 'licolor';
})
}
</script>
</body>
</html>
- 首页新闻
- 师资力量
- 活动策划
- 企业文化
- 招聘信息
- 公司简介
- 上海校区
- 广州校区
function animation(obj, target, callback) { clearInterval(obj.timer); obj.timer = setInterval(function() { var step = (target - obj.offsetLeft) / 3; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { clearInterval(obj.timer); if (callback) { callback(); } } obj.style.left = obj.offsetLeft + step + 'px'; }, 30) }
