js如何實(shí)現(xiàn)水平滾動菜單導(dǎo)航
這篇文章主要介紹了js如何實(shí)現(xiàn)水平滾動菜單導(dǎo)航，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)公司2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站建設(shè)、成都網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元平泉做網(wǎng)站,已為上家服務(wù),為平泉各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220
js有什么特點(diǎn)
1、js屬于一種解釋性腳本語言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺下運(yùn)行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數(shù)據(jù)類型未做出嚴(yán)格的要求，能夠進(jìn)行類型轉(zhuǎn)換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對象的腳本語言，js不僅可以創(chuàng)建對象，也能使用現(xiàn)有的對象。
項(xiàng)目中用到了滾動導(dǎo)航，但是默認(rèn)的滾動條太丑了，只好用js自己模擬了一個。湊合用可以，不算完美。希望以后有機(jī)會再來修飾一下。
先來看下最終效果：
最終效果
先看html結(jié)構(gòu):
全單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%，不然寬度只有父容器的寬度，我掉進(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 width && offset > 0){ //點(diǎn)擊右側(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) { //點(diǎn)擊左側(cè)并且左側(cè)的偏移量小于0，左滑。
listBox.style.left = (listBox.offsetLeft + 200) + 'px';
}else if(e.pageX < width && listBox.offsetLeft < 0){ //臨界位置，左側(cè)滾到開始的位置
listBox.style.left = 0
}
});
}點(diǎn)擊如下所示：
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“js如何實(shí)現(xiàn)水平滾動菜單導(dǎo)航”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
新聞名稱：js如何實(shí)現(xiàn)水平滾動菜單導(dǎo)航
轉(zhuǎn)載源于：
http://weahome.cn/article/pcicps.html
重慶分公司
重慶分公司
