ios 顶部tab滑动实现_手机网站顶部滑动菜单栏，原来实现很简单

现在是移动互联网时代，我们也得跟上时代的潮流，传统的pc网站慢慢转型，开始转成wap网站，并且pc的排版布局结构也不在适用于手机上

例如最直观的一个感受就是菜单，我们平时在使用网页的时候，很明显的感觉到这个网页菜单变得不一样，那么这一期给大家带来的干货是顶部菜单滑动效果

直接上代码演示

顶部菜单滑动效果分享

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,p,th,td,table,textarea,select{margin:0;padding:0;}

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

th,em{font-style:normal;font-weight:normal;}

ol,ul{list-style:none;}

table{border-collapse:collapse;border-spacing:0;}

img,a img{border:0;}

body{font:12px 'Microsoft YaHei',Arial;color:#666;background-color:#eee;}

.nav{width:100%;overflow:hidden;margin:0 auto;height:35px;position:relative; line-height:35px;background-color:#000;}

.nav ul{position:absolute;left:0;top:0;width:640px;z-index:1;}

.nav ul li{width:80px; float:left; overflow:hidden;}

.nav a{color:#fff;width:100%; display:block; text-decoration:none; text-align:center;}

• menu1
• menu2
• menu3
• menu4
• menu5
• menu6
• menu7
• menu8
• menu9
• menu10

// 这里需要初始化

window.Swipe = function(b, a) {

if (!b) {

return null

}

this.options = a || {};

this.index = this.options.startSlide || 0;//开始的导航页的第几屏

this.speed = this.options.speed || 300;//速度

this.lwidth = this.options.width || 80;//导航li宽度

this.delay = this.options.auto || 0;//自动滚动menu速度0为不自动滚动

this.container = b;//在那个容器内

this.element = this.container.children[0];//

this.setup();

if (this.delay != 0) {

this.begin();

}

if (this.element.addEventListener) {

this.element.addEventListener("touchstart