这篇文章主要为大家详细介绍了js实现水平滚动菜单导航,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
项目中用到了滚动导航,但是默认的滚动条太丑了,只好用js自己模拟了一个。凑合用可以,不算完美。希望以后有机会再来修饰一下。
先来看下最终效果:
最终效果
先看html结构:
- 全单1
- 全部菜2单
- 全部3单
- 菜单4
- 全菜单
- 全部5菜单
- 全6单
- 全6部菜单
- 全菜7单
- 全8单
- 全部5菜单
- 全6单
- 全6部菜单
- 全菜7单
- 全8单
- 全9部菜单
- 全10单
- 全11部单
- 菜2单
- 全菜12单
- 全32部菜单
说一下,末尾我给加了阴影的效果:
.root:before{ display: block; content: ''; width: 20px; height:100%; background: rgba(111,111,111,0); box-shadow: 2px 2px 32px 2px #999; position: absolute; right:-20px; top:0; }
其它的样式代码:
*{ margin: 0; padding:0; font-family: "Microsoft YaHei UI"; } #root{ height:60px; width: 800px; white-space: nowrap; overflow: hidden; -webkit-overflow-scrolling: touch; white-space: nowrap; position: relative; border-bottom: 1px solid #eee; padding-right: 20px; background-color: #f5f5f5; margin-left: 100px; margin-top: 50px; } .root:before{ display: block; content: ''; width: 20px; height:100%; background: rgba(111,111,111,0); box-shadow: 2px 2px 32px 2px #999; position: absolute; right:-20px; top:0; } .list{ position: absolute; left:0; top:0; /*width: 100%;*/ /*不能为100%,不然宽度只有父容器的宽度,我掉进这个坑了。*/ transition: all 1s; height:100%; line-height: 2.5; } .on{ color:red; font-weight: bold; } .off{ color: #000; font-weight:normal; } .list li{ display: inline-block; padding:10px 20px; cursor: pointer; }
下面是js的逻辑部分:
var box = document.getElementById('root'); //外面的容器。 var listBox = document.getElementById('list'); //ul列表。主要是移动它的left值 var list = document.getElementsByTagName('li');//所有列表元素 var width = box.clientWidth /2; //为了判断是左滑还是右滑 var totalWidth = 0; for(let i=0;iwidth && offset > 0){ //点击右侧并且右侧的偏移量大于0,左滑。 listBox.style.left = (listBox.offsetLeft-200) + 'px'; }else if(e.pageX > width && offset > 200){ //临界位置,,右侧滚动到末尾 listBox.style.left = -_offset + 'px'; } if(e.pageX
点击如下所示:
还有些不完善的地方,求各位大神指正。
以上就是js实现水平滚动菜单导航的详细内容,更多请关注0133技术站其它相关文章!