js如何實現水平滾動菜單導航

這篇文章主要介紹了js如何實現水平滾動菜單導航，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

js有什么特點

1、js屬于一種解釋性腳本語言；2、在絕大多數瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數據類型未做出嚴格的要求，能夠進行類型轉換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現信息瀏覽或動態交互，從而有效地防止數據的丟失；5、基于對象的腳本語言，js不僅可以創建對象，也能使用現有的對象。

項目中用到了滾動導航，但是默認的滾動條太丑了，只好用js自己模擬了一個。湊合用可以，不算完美。希望以后有機會再來修飾一下。

先來看下最終效果：

最終效果

先看html結構:

<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>

說一下，末尾我給加了陰影的效果：

.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<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
   }

  });

 }

點擊如下所示：

感謝你能夠認真閱讀完這篇文章，希望小編分享的“js如何實現水平滾動菜單導航”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!