原生JS实现特效导航条

分享一个用原生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></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><script>window.onload = function () {var nav = document.getElementById('nav');var tagList = nav.getElementsByTagName('a');var strongList = nav.getElementsByTagName('strong');var height = nav.getElementsByTagName('li')[0].offsetHeight;for (var i = 0; i < strongList.length; i++) {tagList[i].style.width = strongList[i].style.width = strongList[i].getElementsByTagName('span')[0].offsetWidth + 'px';strongList[i].style.position = 'absolute';strongList[i].style.top = strongList[i].style.left = 0;strongList[i].onmouseover = function () {startMove(this, -height);};strongList[i].onmouseout = function () {startMove(this,0);};}};function startMove(obj, height) {clearInterval(obj.timer);obj.timer = setInterval(function () {if (obj.offsetTop == height) {clearInterval(obj.timer);} else {var speed = (height - obj.offsetTop) / 4;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);obj.style.top = obj.offsetTop + speed + 'px';}}, 30);}</script></body></html>

原生JS实现特效导航条相关推荐

弹出式导航html,基于JS代码实现导航条弹出式悬浮菜单
1.概述采用弹出式悬浮菜单,不但可以使网站的导航内容更加清晰,而且不影响页面的整体效果.运行本实例,如图1所示,当鼠标移动到一级导航菜单的标题上时,将弹出悬浮菜单显示该菜单对应的子菜单,鼠标移出时, ...
原生js javascript 实现进度条拖动---移动端
最近的需求有个简单的移动端页面,需要在页面中实现一个进度条的拖动,因为没引入什么框架,所以只能原生JavaScript手写了, 效果图: 代码:这些代码可以复制到本地一个html文件中,直接双击打开, ...
H5+原生js 雪花特效
概述随着前端技术的发展,越来越多的H5技术被应用到实际开发中,本次实现的是屏幕实现雪花飘落特效. 2 效果图如下: 3 主要功能实现雪花飘落. ...后续功能可以自己酌情添加 4实现方式首先 , ...
原生js实现导航条动画
原生js实现毛毛虫导航直接上代码 <!DOCTYPE html> <html><head><meta charset="utf-8" / ...
原生JS实现购物车制作和楼梯导航（11）
购物车 1. 全选按钮 1.1 将所有的单选按钮和全选按钮保持一致, 并且所有的全选按钮也保持一致 1.2 将总件数变成单选按钮的个数 1.3 计算总计 2. 单选按钮功能: 2.1 判断 ...
原生JS实现加载进度条
分享一个原生JS实现的动态加载进度条特效,效果如下: 实现的代码如下: <!DOCTYPE html> <html><head><meta http-equi ...
微信小程序：scroll-view制作横向滚动导航条特效
微信小程序:scroll-view制作横向滚动导航条特效一.scroll-view介绍微信小程序官方释义为:可滚动视图区域,目前一共有10几个属性,包括:scroll-x.scroll-y.scr ...
html鼠标滑过导航条展开导航条,JS+CSS实现鼠标滑过时动态翻滚的导航条效果
本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用J ...
原生JS实现拖拽进度条、滚动鼠标显示相应的内容
今天要分享的是运用原生JS实现拖拽进度条.滚动鼠标显示相应的内容,实现效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html><hea ...

原生JS实现特效导航条

原生JS实现特效导航条相关推荐

最新文章

热门文章