移動端實現導航的左右滑動
實現導航的左右滑動類似於騰訊新聞,網易等導航,一下貼上程式碼:
<!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>
相關推薦
移動端實現導航的左右滑動
實現導航的左右滑動類似於騰訊新聞,網易等導航,一下貼上程式碼: <!doctype html> <html><head><meta charset="UTF-8"><title>Untitled Document&
原生JS實現移動端模組的左右滑動切換效果,基於vue、stylus
原生JS實現移動端模組的左右滑動動畫效果,基於vue、stylus 大概實現方案: 手指touch螢幕的整個過程,會派發touchstart、touchmove、touchend三個事件,對這三個事件設定相應函式,通過移動過程中位置的變化計算出偏移值,進行對應的設定。 注:
實現可左右滑動的導航選單頁面
1.wxml頁面程式碼:<viewclass="nav-scroll"><scroll-viewclass="scroll-view_H"scroll-x="true"style="w
移動端HTML5導航欄吸頂:IOS(sticky)和Android兩種實現方式
混合App,前端H5頁面,實現導航欄滑動到的時候貼頂。 注意: 首先寫的時候,監聽scroll事件,滑動到指定位置時改為定位 position:fixed;,實際運用過程中,IOS無法實時監聽scroll事件,在滾動停止之後才觸發的 $(wind
基於slideout.js實現的移動端側邊欄滑動特效
HTML5現在本領太大了,PC端已經無法滿足它的胃口了,它將強勢攻入移動端,所以移動端中各種特效也得基於HTML5實現,看看我們將要介紹的slideout.js,能幫我們實現怎麼樣的側邊欄滑動特效呢~~ 先看下執行效果: 一、準備資料 只需要準備s
移動端底部導航固定配合vue-router實現元件切換
在我們平時練習或者實際專案中也好,我們常常遇到這麼一個需求:移動端中的導航並不是在頂部也不是在底部,而是在最底部且是固定的,當我們點選該導航項時會切換到對應的元件。相信對於很多朋友而言,這是一個很簡單的需求,而且市面上有很多開源的元件庫就可以實現,像比如說:cube-ui等!那麼對於一個要是還在練習以及對第三
移動端內容超出容器滑動會卡的解決辦法
brush 自動 color pre contain back 容器 ... ont 建議不采用flex布局,滑動會卡 直接采用最原始的: 1.在最外層給定一個width(height)值,固定容器的寬高,然後overflow:auto; 2.它裏
移動端頁面觸摸滑動
col tde chang tar post eve start blog default $("body").on("touchstart", function(e) { // 判斷默認行為是否可以被禁用 if (e.cancelable) {
移動端判斷用戶滑動方向
絕對值 touch brush edt end alert 手指 first 滑動方向 思路: (1)獲取用戶的滑動手指初始坐標 (2)獲取用戶滑動結束時的手指坐標 (3)比較x,y方向上的絕對值,用於判斷滑動方向是左右還是上下 (4)最後實
移動端實現焦點圖
scale 內容 點擊 ice com lba fun maximum 代碼 需要下載的js是:swipe.js文件,http://www.swiper.com.cn/download/index.html 代碼: 1 <!DOCTYPE html> 2
QML實現網頁左右滑動的輪播圖效果
網頁中有很多的左右滑動的圖片輪動的效果。QML實現此效果的兩種方式。 PageIndicator和TabBar 也對應兩種樣式。 其中左右滑動的動畫效果是利用SwipeView的預設切換動畫效果 import QtQuick 2.9 import QtQuick.Controls 2.
thinkphp+ajax 移動端實現滾動到底部載入資料(無重新整理動態載入資料技術的應用)
監聽滾動條的js檔案地址:http://ons.me/526.html 1、dropload.css檔案 .dropload-up,.dropload-down{ position: relative; height: 0; &n
移動端實現專案
1 引言 利用Hbuilder盡行手機app開發,有以下幾點好處: (1)已有的web專案可以很快速的改成手機app (2)開發一次雙端執行(ios,安卓) (3)開發簡單,會基本的html就能開發 2 具體實現 其實與之前寫的B/S相似,手機端主要實現圖片上傳功能,而
移動端實現彈出框漸顯和漸隱效果
在移動端想實現一個彈出框漸漸出現和消失的效果。由於用的是vue.js,所以寫法有些獨特,用變數控制是否顯示類名。但是核心解決方法就是CSS3的animation屬性應用還有CSS中的z-index應用,必須初始化定義讓彈出框在最底部。還有就是opacity屬性的應用,這樣才有漸健彈出和漸漸消失的效果。給彈出框
React+React Router+React-Transition-Group實現頁面左右滑動+滾動位置記憶
在React Router中,想要做基於路由的左右滑動,我們首先得搞清楚當發生路由跳轉的時候到底發生了什麼,和路由動畫的原理。 首先我們要先了解一個概念:history。history原本是內置於瀏覽器內的一個物件,包含了一些關於歷史記錄的一些資訊,但本文要說的history是React-R
H5移動端實現手機震動效果
判斷相容 瀏覽器對振動API的支援情況,一個好的習慣就是在使用之前要檢查一下當前你的應用環境、瀏覽器是否支援振動API。下面就是檢測的方法: setTimeout(()=>{ navigator.vibrate = navigator.vibrate || navigator.
vue 移動端,頁面左右頁面切換效果(切換過程中會出現白屏效果,布吉島怎麼優化,後來就釋出前就棄用了)
<transition name="left"> <router-view v-if="getCms" class="Router"/> </transition> data() { names: 'left' } watch: { '$route'(to,
vue 移動端,頁面左右頁面切換效果(切換過程中會出現白屏效果,布吉島怎麽優化,後來就發布前就棄用了)
names out name watch bsp etc () nsf his <transition name="left"> <router-view v-if="getCms" class="Router"/> </transition
【移動端實現】相機喚起及圖片上傳功能(包括微信)
前言 目前有個需求是圖片拍照上傳的功能,但是我就是死活掉不起相機。。。總是開啟的是檔案目錄OR上傳圖片。。。。而不是相機。。。 所以對比了下 程式碼: 參考了百度移動端實現方式。。。程式碼很簡單,對就這一句! <input type="file" acce
Javascript實現的左右滑動選單
先看Demo便於理解:請大家往這裡看 業務需求: 1. 選單個數不固定,當選單個數長度小於給定範圍寬度,則左右移動控制按鈕不啟用(呈灰色狀態)。 2. 初始未移動,右側按鈕為灰色,左邊按鈕為彩色,提示使用者可以點選左側的移動檢視選單超出給定範圍的部分。 3. 當移動開始,左右按鈕都應為彩色,提示使用者此時可