實現導航的左右滑動類似于騰訊新聞，網易等導航，一下貼上代碼：
<!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>
新聞熱點
疑難解答
