原生JS实现特效导航条
原生JS实现特效导航条
越陌度阡
发布于 2020-11-26 15:32:58
发布于 2020-11-26 15:32:58
分享一个用原生JS实现的特效导航条，效果如下：
实现代码如下：
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>原生JS实现特效导航条</title>
<style>
body {
margin: 0;
background: #66FF99;
}
ul {
padding-left: 0;
margin: 0;
}
li {
list-style: none;
}
#nav {
height: 40px;
background: #900;
margin-top: 50px;
}
#nav ul {
width: 800px;
height: 40px;
margin: 0 auto;
}
#nav li {
float: left;
height: 40px;
}
#nav a {
float: left;
position: relative;
height: 40px;
overflow: hidden;
font-size: 14px;
color: #e0e03a;
text-decoration: none;
cursor: pointer;
}
#nav strong {
float: left;
}
#nav span {
float: left;
padding: 0 20px;
height: 40px;
line-height: 40px;
background: #900;
clear: both;
}
#nav .active,
#nav .current span {
background: #600;
color: #fff;
}
#nav .current .active {
color: #e0e03a;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('nav');
var aStrong = oDiv.getElementsByTagName('strong');
var aA = oDiv.getElementsByTagName('a');
var iTarget = oDiv.getElementsByTagName('li')[0].offsetHeight;
for (var i = 0; i < aStrong.length; i++) {
aA[i].style.width = aStrong[i].style.width = aStrong[i].getElementsByTagName('span')[0].offsetWidth + 'px';
aStrong[i].style.position = 'absolute';
aStrong[i].style.top = aStrong[i].style.left = 0;
aStrong[i].onmouseover = function () {
startMove(this, -iTarget);
};
aStrong[i].onmouseout = function () {
startMove(this, 0);
};
}
};
function startMove(obj, target) {
clearInterval(obj.iTime);
obj.iTime = setInterval(function () {
if (obj.offsetTop == target) {
clearInterval(obj.iTime);
} else {
var iSpeed = (target - obj.offsetTop) / 4;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
obj.style.top = obj.offsetTop + iSpeed + 'px';
}
}, 30);
}
</script>
</head>
<body>
<div id="nav">
<ul>
<li class="current">
<a>
<strong>
<span>网站首页</span>
<span class="active">网站首页</span>
</strong>
</a>
</li>
<li>
<a>
<strong>
<span>服务案例</span>
<span class="active">服务案例</span>
</strong>
</a>
</li>
<li>
<a>
<strong>
<span>关于我们</span>
<span class="active">关于我们</span>
</strong>
</a>
</li>
<li>
<a>
<strong>
<span>企业文化</span>
<span class="active">企业文化</span>
</strong>
</a>
</li>
<li>
<a>
<strong>
<span>核心课程</span>
<span class="active">核心课程</span>
</strong>
</a>
</li>
<li>
<a>
<strong>
<span>联系我们</span>
<span class="active">联系我们</span>
</strong>
</a>
</li>
</ul>
</div>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-07-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读