手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

移動端實現(xiàn)導(dǎo)航的左右滑動

2019-8-16    seo達(dá)人

實現(xiàn)導(dǎo)航的左右滑動類似于騰訊新聞,網(wǎng)易等導(dǎo)航,一下貼上代碼:



<!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;//開始的導(dǎo)航頁的第幾屏

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

this.lwidth = this.options.width || 80;//導(dǎo)航li寬度

    this.delay = this.options.auto || 0;//自動滾動菜單速度0為不自動滾動

    this.container = b;//在那個容器內(nèi)

    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);//監(jiān)聽過度動畫是否結(jié)束

        window.addEventListener("resize", this, false)

    }

};

Swipe.prototype = {

//設(shè)置其基本樣式

    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) {//沒有子節(jié)點,獲取不到屏幕寬度均返回

            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.lengththis.lwidth)/this.width));

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

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

//       b.msTransform = b.OTransform = "translateX(" + -((Math.ceil((this.slides.lengththis.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()

    }

};





//開始調(diào)用插件





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

</script>

</body>

</html>

藍(lán)藍(lán)設(shè)計www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計  包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

分享本文至:

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://www.88yangsc.com

存檔