追求卓越一諾千金

藍藍設計|_365天天彩票是正规的吗,2011年成立-_易彩彩票是正规的吗,主創清華團隊||诺基亚手机真伪查询,專注軟件和互聯網ui設計開發-|花溪花溪。擅長企業信息化管理|||泷泽罗拉种子下载、監控|_-易彩网彩票是合法的吗、大數據軟件UIUE谘詢和設計開發服務|--360全国彩票开奖公告查询。立足UI-|报关单样本,好好學習|__德雅村租房,天天進步||_106官方彩票官网!


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

2019-8-16 釋然 前端及開發文章及欣賞


實現導航的左右滑動類似於騰訊新聞__-永盛彩票网址,網易等導航-|优彩app是真的吗?,一下貼上代碼_|-二手奢侈品寄卖店:

<!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
    },
    //前一個_-_联想20003,
    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>
藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司好千度,為期望卓越的國內外企業提供卓越的UI界麵設計|-空军副班长、BS界麵設計 -_陈瑞围棋道场、 cs界麵設計 _|_长武公众信息网、 ipad界麵設計 --盈彩彩票是真是假、 包裝設計 |_-肖字和德、 圖標定製 |_-代练宝、 用戶體驗 _|-诸葛智彩软件好用吗、交互設計-_|365约彩开奖结果可靠吗、 網站建設 |_camera是什么意思、平麵設計服務_--御龙在天野蘑菇在哪。
標簽: 移動端實現導航的左右滑動 « Java中this關鍵字的詳解 | vue移動端 實現手機左右滑動入場動畫»


訂閱Rss