1. 程式人生 > >移動端實現導航的左右滑動

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

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

<!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. 當移動開始,左右按鈕都應為彩色,提示使用者此時可