移動端實現導航的左右滑動

阿新 • • 發佈：2019-01-15

實現導航的左右滑動類似於騰訊新聞，網易等導航，一下貼上程式碼：

<!doctype html>

<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<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>

<body>

<div class="nav" id="nav">
<ul>
<li><a href="#">選單1</a></li>
<li><a href="#">選單2</a></li>
<li><a href="#">選單3</a></li>
<li><a href="#">選單4</a></li>
<li><a href="#">選單5</a></li>
<li><a href="#">選單6</a></li>
<li><a href="#">選單7</a></li>
<li><a href="#">選單8</a></li>
<li><a href="#">選單9</a></li>
<li><a href="#">選單10</a></li>
</ul>
</div>

<script>
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;//自動滾動選單速度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
//console.log(a * this.width,Math.ceil((this.slides.length*this.lwidth)/this.width));
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":
case "transitionend":
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()
}
};

//開始呼叫外掛

var slider=new Swipe(document.getElementById('nav'),{speed:500,auto:0,width:100,col:4,});
</script>
</body>
</html>

移動端實現導航的左右滑動

移動端實現導航的左右滑動

原生JS實現移動端模組的左右滑動切換效果，基於vue、stylus

實現可左右滑動的導航選單頁面

移動端HTML5導航欄吸頂：IOS（sticky）和Android兩種實現方式

基於slideout.js實現的移動端側邊欄滑動特效

移動端底部導航固定配合vue-router實現元件切換

移動端內容超出容器滑動會卡的解決辦法

移動端頁面觸摸滑動

移動端判斷用戶滑動方向

移動端實現焦點圖

QML實現網頁左右滑動的輪播圖效果

thinkphp+ajax 移動端實現滾動到底部載入資料(無重新整理動態載入資料技術的應用)

移動端實現專案

移動端實現彈出框漸顯和漸隱效果

React+React Router+React-Transition-Group實現頁面左右滑動+滾動位置記憶

H5移動端實現手機震動效果

vue 移動端，頁面左右頁面切換效果（切換過程中會出現白屏效果，布吉島怎麼優化，後來就釋出前就棄用了）

vue 移動端，頁面左右頁面切換效果（切換過程中會出現白屏效果，布吉島怎麽優化，後來就發布前就棄用了）

【移動端實現】相機喚起及圖片上傳功能（包括微信）

Javascript實現的左右滑動選單

移動端實現導航的左右滑動

相關推薦