这篇文章给大家介绍使用HTML5怎么实现一个横向滑动导航栏,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。首先引入scroll.jshtml部分<!-- 科目导航 --> &nb
这篇文章给大家介绍使用HTML5怎么实现一个横向滑动导航栏,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
首先引入scroll.js
html部分
<!-- 科目导航 --> <div id="navBox" class="navMain"> <ul class="nav" style="position:relative!important;"> <li><a class="active" href="javascript:;">全部</a></li> <li><a href="javascript:;">数学</a></li> <li><a href="javascript:;">英语</a></li> <li><a href="javascript:;">语文</a></li> <li><a href="javascript:;">物理</a></li> <li><a href="javascript:;">思想品德</a></li> </ul> </div>
CSS部分
.nav li { float: left; min-width: 60px; 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;}
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.width = (liArray[0].clientWidth + 10)*liLength +"px"; var carousel=new iScroll("carousel",{hScrollbar:false, vScrollbar:false, vScroll: false}); });
关于使用html5怎么实现一个横向滑动导航栏就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
--结束END--
本文标题: 使用html5怎么实现一个横向滑动导航栏
本文链接: https://www.lsjlt.com/news/255725.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
2024-04-29
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0