html手机导航效果,原生js实现手机端导航滑动效果

代码如下:

导航效果

div,

li,

ul,

a {

margin: 0;

padding: 0;

}

ul,

li {

list-style: none;

}

ul {

width: 500px;

height: 35px;

display: block;

white-space: nowrap;

overflow: hidden;

overflow-x: auto;

border-bottom: 1px solid #dd3;

}

ul > li {

width: 60px;

height: 35px;

display: inline-block;

cursor: pointer;

color: #8d19f3;

font-size: 18px;

text-align: center;

line-height: 35px;

}

ul > li:not(:first-child) {

margin-left: 25px;

}

::-webkit-scrollbar {

width: 0;

height: 0;

}

• 导航一
• 导航二
• 导航三
• 导航四
• 导航五
• 导航六
• 导航七
• 导航八
• 导航九
• 导航十
• 导航十一
• 导航十二
• 导航十三
• 导航十四
• 导航十五
• 导航十六

var timer = null,

parentElement = document.querySelector(".box"),

childElement = document.querySelectorAll("li");

for (var i = 0, len = childElement.length; i < len; i++) {

childElement[i].index = i;

childElement[i].onclick = function() {

var offsetLeft = childElement[this.index].offsetLeft,

scrollX = parentElement.scrollLeft,

clientX = parentElement.clientWidth,

childClientX = childElement[this.index].clientWidth;

var speed = offsetLeft - scrollX + childClientX / 2 - clientX / 2,

s = speed / 40,

totalX = speed + scrollX;

timer = setInterval(function() {

parentElement.scrollLeft += s;

if (

parentElement.scrollLeft <= 0 ||

parentElement.scrollLeft >= parentElement.scrollWidth - clientX ||

(speed > 0 && parentElement.scrollLeft > totalX) ||

(speed < 0 && parentElement.scrollLeft < totalX)

) {

clearInterval(timer);

}

}, 10);

};

}

效果如图所示: