最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
html5如何实现横向滑动导航栏 html5横向滑动导航栏实现代码
时间:2022-06-25 17:57:13 编辑:袖梨 来源:一聚教程网
html5如何实现横向滑动导航栏?本篇文章小编给大家分享一下html5横向滑动导航栏实现代码方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
需要效果
1、首先引入scroll.js
2、html部分
3、css部分
/* 滑动导航 */ .nav li { float: left; min- padding: 5px 0; margin-right: 9px; } .nav a{ font-size: 14px; color: #999; } .navMain{ background-color: #fff; position: relative; margin: 0 13px; } .nav{ background-color: #fff; overflow: hidden; } .nav li>a.active{ color: #3a95f5; border-bottom: 1px solid #3a95f5; padding-bottom: 2px; }
4、js部分
$(".nav li a").click(function(){ $(this).addClass("active").parents("li").siblings().find("a").removeClass("active"); }); window.addEventListener('load',function(){ var $navBox = document.getElementById('navBox'), $ul = $navBox.querySelector('ul'), liArray = $navBox.querySelectorAll('li'), liLength = $navBox.querySelectorAll('li').length;10 $ul.style.px"; var carousel=new iScroll("carousel",{hScrollbar:false, vScrollbar:false, vScroll: false}); });
相关文章
- 《夜族崛起》铁匠西里尔位置一览 05-17
- 《寓言之地》1.02更新内容一览 05-17
- 《辐射4》steam好评率介绍 05-17
- 《夜族崛起》技能强化珠宝掉落说明 05-17
- 《辐射4》主机控制台介绍 05-17
- 《星露谷物语》海草和绿藻获取方法 05-17