手机下拉菜单栏变成网页（手机网站顶部滑动菜单栏）-爱玩科技

威哥 2023-04-06 17:39:21 604

手机下拉菜单栏变成网页（手机网站顶部滑动菜单栏）<meta name="viewport" content="width=device-width initial-scale=1.0" /> <title>顶部菜单滑动效果分享</title> <html> <head> <meta charset="UTF-8" />

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

手机下拉菜单栏变成网页（手机网站顶部滑动菜单栏）(1)

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

直接上代码演示

手机下拉菜单栏变成网页（手机网站顶部滑动菜单栏）(2)

<!DOCTYPE html>

<html>

<head>

<title>顶部菜单滑动效果分享</title>

<style>

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

</style>

</head>

<body>

<ul>

</ul>

</div>

// 这里需要初始化

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" this false);

this.element.addEventListener("touchmove" this false);

this.element.addEventListener("touchend" this false);

this.element.addEventListener("touchcancel" this false);

this.element.addEventListener("webkitTransitionEnd" this false);

this.element.addEventListener("msTransitionEnd" this false);

this.element.addEventListener("oTransitionEnd" this false);

this.element.addEventListener("transitionend" this false);//监听过度动画是否结束

window.addEventListener("resize" this false)

}

};

Swipe.prototype = {

//设置其基本样式

setup: function() {

this.slides = this.element.children;

this.width = Math.ceil(("getBoundingClientRect" in this.container) ? this.container.getBoundingClientRect().width: this.container.offsetWidth);

if (!this.width||this.slides.length < 1) {//没有子节点，获取不到屏幕宽度均返回

return null

}

this.element.style.width = Math.ceil(this.slides.length * this.lwidth) "px";

var a = this.slides.length;

while (a--) {

var b = this.slides[a];

b.style.width = this.lwidth "px";

}

this.slide(this.index 0);

}

slide: function(a c) {

var b = this.element.style;

if (c == undefined) {

c = this.speed

}

//过度效果需要花费时间

b.webkitTransitionDuration = b.MozTransitionDuration = b.msTransitionDuration = b.OTransitionDuration = b.transitionDuration = c "ms";

this.index = a

if(a * this.width>(Math.ceil((this.slides.length*this.lwidth)/this.width)-1)*this.width){

// b.MozTransform = b.webkitTransform = "translate3d(" -((Math.ceil((this.slides.length*this.lwidth)/this.width)-1) * this.width) "px 0 0)";

// b.msTransform = b.OTransform = "translateX(" -((Math.ceil((this.slides.length*this.lwidth)/this.width)-1) * this.width) "px)";

return false;

}

else{

b.MozTransform = b.webkitTransform = "translate3d(" -(a * this.width) "px 0 0)";

b.msTransform = b.OTransform = "translateX(" -(a * this.width) "px)";

}

getPos: function() {

return this.index

}

//前一个，

prev: function(a) {

this.delay = a || 0;

clearTimeout(this.interval);

// console.log(this.index);

if (this.index) {

this.slide(this.index - 1 this.speed)

//console.log( this.index);

} else {

this.slide(this.length - 1 this.speed)

}

//后一个

next: function(a) {

this.delay = a || 0;

clearTimeout(this.interval);

if (this.index < this.length - 1) {

this.slide(this.index 1 this.speed)

} else {

this.slide(0 this.speed)

}

// 开始位置

begin: function() {

var a = this;

console.log(a);

this.interval = (this.delay) ? setTimeout(function() {

a.next(a.delay)

}

this.delay) : 0

}

// 停止

stop: function() {

this.delay = 0;

clearTimeout(this.interval)

}

resume: function() {

this.delay = this.options.auto || 0;

this.begin()

}

handleEvent: function(a) {

switch (a.type) {

case "touchstart":

this.onTouchStart(a);

break;

case "touchmove":

this.onTouchMove(a);

break;

case "touchcancel":

case "touchend":

this.onTouchEnd(a);

break;

case "webkitTransitionEnd":

case "msTransitionEnd":

case "oTransitionEnd":

this.transitionEnd(a);

break;

case "resize":

this.setup();

break

}

transitionEnd: function(a) {

if (this.delay) {

this.begin()

}

onTouchStart: function(a) {

this.start = {

pageX: a.touches[0].pageX

pageY: a.touches[0].pageY

time: Number(new Date())

};

// console.log(this.start)

this.isScrolling = undefined;

this.deltaX = 0;

this.element.style.MozTransitionDuration = this.element.style.webkitTransitionDuration = 0;

a.stopPropagation()

}

onTouchMove: function(a) {

if (a.touches.length > 1 || a.scale && a.scale !== 1) {

return

}

this.deltaX = a.touches[0].pageX - this.start.pageX;

if (typeof this.isScrolling == "undefined") {

//判断是横向还是树向滑动

this.isScrolling = !!(this.isScrolling || Math.abs(this.deltaX) < Math.abs(a.touches[0].pageY - this.start.pageY))

}

if (!this.isScrolling) {

a.preventDefault();

clearTimeout(this.interval);

this.deltaX = this.deltaX / ((!this.index && this.deltaX > 0 || this.index == this.length - 1 && this.deltaX < 0) ? (Math.abs(this.deltaX) / this.width 1) : 1);

this.element.style.MozTransform = this.element.style.webkitTransform = "translate3d(" (this.deltaX - this.index * this.width) "px 0 0)";

a.stopPropagation()

}

onTouchEnd: function(c) {

var b = Number(new Date()) - this.start.time < 250 && Math.abs(this.deltaX) > 20 || Math.abs(this.deltaX) > this.width / 2

a = !this.index && this.deltaX > 0 || this.index == this.length - 1 && this.deltaX < 0;

if (!this.isScrolling) {

this.slide(this.index (b && !a ? (this.deltaX < 0 ? 1: -1) : 0) this.speed)

}

c.stopPropagation()

}

};