<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none;
}
body {
background-color: black;
}
.c-nav {
width: 900px;
height: 42px;
background: #fff url(images/rss.png) no-repeat right center;
margin: 100px auto;
border-radius: 5px;
position: relative;
}
.c-nav ul {
position: absolute;
}
.c-nav li {
float: left;
width: 83px;
text-align: center;
line-height: 42px;
}
.c-nav li a {
color: #333;
text-decoration: none;
display: inline-block;
height: 42px;
}
.c-nav li a:hover {
color: white;
}
.c-nav li.current a {
color: #0dff1d;
}
.cloud {
position: absolute;
left: 0;
top: 0;
width: 83px;
height: 42px;
background: url(images/cloud.gif) no-repeat;
}
</style>
<!-- <script src="animate.js"></script> -->
<script>
window.addEventListener('load', function () {
// 1. 获取元素
var cloud = document.querySelector('.cloud');
var c_nav = document.querySelector('.c-nav');
var lis = c_nav.querySelectorAll('li');
// 2. 给所有的小li绑定事件
// 这个current 做为筋斗云的起始位置
var current = 0
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener('mouseenter', function () {
console.log(this.offsetLeft)
animate(cloud, this.offsetLeft)
})
lis[i].addEventListener('mouseleave', function () {
animate(cloud, current)
})
lis[i].addEventListener('click', function () {
current = this.offsetLeft
})
}
function animate(obj, target, callBack) {
clearInterval(obj.timer)
obj.timer = setInterval(function () {
var step = (target - obj.offsetLeft) / 10
step = (step > 0 ? Math.ceil(step) : Math.floor(step))
if (obj.offsetLeft == target) {
clearInterval(obj.timer)
callBack && callBack()
return
}
obj.style.left = obj.offsetLeft + step + 'px'
}, 15)
}
})
</script>
</head>
<body>
<div id="c_nav" class="c-nav">
<span class="cloud"></span>
<ul>
<li class="current"><a href="#">首页新闻</a></li>
<li><a href="#">师资力量</a></li>
<li><a href="#">活动策划</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">招聘信息</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">我是佩奇</a></li>
<li><a href="#">啥是佩奇</a></li>
</ul>
</div>
</body>
</html>
js习题(筋斗云导航栏)
猜你喜欢
转载自blog.csdn.net/weixin_46611729/article/details/108894892
今日推荐
周排行