js如何实现水平滚动菜单导航
这篇文章主要介绍了js如何实现水平滚动菜单导航，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联公司2013年成立，是专业互联网技术服务公司，拥有项目网站建设、成都网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元平泉做网站,已为上家服务,为平泉各地企业和个人服务,联系电话:028-86922220
js有什么特点
1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，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;i width && 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 < width && listBox.offsetLeft < -200) { //点击左侧并且左侧的偏移量小于0，左滑。
listBox.style.left = (listBox.offsetLeft + 200) + 'px';
}else if(e.pageX < width && listBox.offsetLeft < 0){ //临界位置，左侧滚到开始的位置
listBox.style.left = 0
}
});
}点击如下所示：
感谢你能够认真阅读完这篇文章，希望小编分享的“js如何实现水平滚动菜单导航”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
网站栏目：js如何实现水平滚动菜单导航
URL标题：
http://cdkjz.cn/article/pcicps.html
