js實現(xiàn)水平滾動菜單導(dǎo)航
更新時間:2017年07月21日 09:06:37 作者:YuMay2009
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)水平滾動菜單導(dǎo)航,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
項目中用到了滾動導(dǎo)航,但是默認(rèn)的滾動條太丑了,只好用js自己模擬了一個。湊合用可以,不算完美。希望以后有機(jī)會再來修飾一下。
先來看下最終效果:
最終效果
先看html結(jié)構(gòu):
<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%,不然寬度只有父容器的寬度,我掉進(jìn)這個坑了。*/ 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){ //點擊右側(cè)并且右側(cè)的偏移量大于0,左滑。 listBox.style.left = (listBox.offsetLeft-200) + 'px'; }else if(e.pageX > width && offset > 200){ //臨界位置,,右側(cè)滾動到末尾 listBox.style.left = -_offset + 'px'; } if(e.pageX < width && listBox.offsetLeft < -200) { //點擊左側(cè)并且左側(cè)的偏移量小于0,左滑。 listBox.style.left = (listBox.offsetLeft + 200) + 'px'; }else if(e.pageX < width && listBox.offsetLeft < 0){ //臨界位置,左側(cè)滾到開始的位置 listBox.style.left = 0 } }); }
點擊如下所示:
還有些不完善的地方,求各位大神指正。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
JavaScript取得鼠標(biāo)絕對位置程序代碼介紹
文章介紹了關(guān)于JavaScript在不同瀏覽器下取得鼠標(biāo)絕對位置相關(guān)函數(shù)用法及兼容性介紹,有需要的同學(xué)可參考一下2012-09-09JavaScript+html5 canvas實現(xiàn)圖片破碎重組動畫特效
這篇文章主要介紹了JavaScript+html5 canvas實現(xiàn)破碎重組的視頻特效,感興趣的小伙伴們可以參考一下2016-02-02JS如何去掉小數(shù)末尾多余的0,并且最多保留兩位小數(shù)
這篇文章主要介紹了JS如何去掉小數(shù)末尾多余的0,并且最多保留兩位小數(shù)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04在JavaScript中使用inline函數(shù)的問題
在JavaScript中使用inline函數(shù)的問題...2007-03-03