js实现水平滚动菜单导航
脚本之家 2017-08-31 1415
项目中用到了滚动导航，但是默认的滚动条太丑了，只好用js自己模拟了一个。凑合用可以，不算完美。希望以后有机会再来修饰一下。
先来看下最终效果：
最终效果
先看html结构:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <div id='root' class="root"> <ul class="list" id="list"> <li>全单1</li> <li>全部菜2单</li> <li>全部3单</li> <li>菜单4</li> <li>全菜单</li> <li>全部5菜单</li> <li>全6单</li> <li>全6部菜单</li> <li>全菜7单</li> <li>全8单</li> <li>全部5菜单</li> <li>全6单</li> <li>全6部菜单</li> <li>全菜7单</li> <li>全8单</li> <li>全9部菜单</li> <li>全10单</li> <li>全11部单</li> <li>菜2单</li> <li>全菜12单</li> <li>全32部菜单</li> </ul> </div> |
说一下，末尾我给加了阴影的效果：
1 2 3 4 5 6 7 8 9 10 11 | .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; } |
其它的样式代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | *{ 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的逻辑部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 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<list.length;i++){ totalWidth = totalWidth + list[i].offsetWidth; //所有列表元素的总宽度 } for(let i=0;i<list.length;i++){ var _offset = totalWidth - box.clientWidth; //右边的偏移量 list[i].addEventListener('click', function (e) { for(let j=0;j<list.length;j++){ list[j].className = 'off'; //移除所有元素的样式 } list[i].className = 'on'; //给点击的元素添加样式 var offset =totalWidth - (Math.abs(listBox.offsetLeft) + box.clientWidth) + 100; //右边的偏移量 = 所有元素宽度之和 - （ul容器的左偏移量 + 父容器的宽度） if(e.pageX > 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 } }); } |
下一篇：会计怎么核对现金日记账
