jQuery扁平水平滑动Tab选项卡滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery扁平水平滑动Tab选项卡滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery扁平水平滑动Tab选项卡</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<!--<link href='http://fonts.useso.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>-->
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<nav class="nav nav--active">
  <ul class="nav__list">
	<li class="nav__item">
	  <a href="" class="nav__link">
		<div class="nav__thumb color1" data-letter="a"></div>
		<p class="nav__label">About</p>
	  </a>
	</li>
	<li class="nav__item">
	  <a href="" class="nav__link">
		<div class="nav__thumb color2" data-letter="p"></div>
		<p class="nav__label">Products</p>
	  </a>
	</li>
	<li class="nav__item">
	  <a href="" class="nav__link">
		<div class="nav__thumb color3" data-letter="q"></div>
		<p class="nav__label">Questions</p>
	  </a>
	</li>
	<li class="nav__item">
	  <a href="" class="nav__link">
		<div class="nav__thumb color4" data-letter="e"></div>
		<p class="nav__label">Events</p>
	  </a>
	</li>
	<li class="nav__item">
	  <a href="" class="nav__link">
		<div class="nav__thumb color5" data-letter="s"></div>
		<p class="nav__label">Sponsors</p>
	  </a>
	</li>
	<li class="nav__item">
	  <a href="" class="nav__link">
		<div class="nav__thumb color6" data-letter="c"></div>
		<p class="nav__label">Contact</p>
	  </a>
	</li>
  </ul>
  <div class="burger burger--close">
	<div class="burger__patty"></div>
  </div>
</nav>

<div class="page">
  <section class="section section--active color1" data-letter="a">
  </section>
  <section class="section color2" data-letter="p">
	<article class="section__wrapper">
	  <h1 class="section__title">Products</h1>
	  <p>Use your 'left' and 'right' arrow keys to navigate.<br> Quos vel omnis quibusdam at inventore atque assumenda dignissimos ipsa magni perferendis, minima neque saepe reprehenderit quisquam numquam voluptas quo placeat quaerat!</p>
	</article>
  </section>
  <section class="section color3" data-letter="q">
	<article class="section__wrapper">
	  <h1 class="section__title">Questions</h1>
	  <p>Use your 'left' and 'right' arrow keys to navigate.<br> Labore iure tempora magnam aliquid voluptatum sit placeat necessitatibus, adipisci est, ipsum doloremque. Id quia consequatur labore repellendus. Ab eligendi voluptatibus doloribus.</p>
	</article>
  </section>
  <section class="section color4" data-letter="e">
	<article class="section__wrapper">
	  <h1 class="section__title">Events</h1>
	 <p>Use your 'left' and 'right' arrow keys to navigate.<br> Earum porro, at odit. Dolorem velit asperiores quam obcaecati ex numquam aspernatur at et! Possimus blanditiis, distinctio est qui deleniti nisi dolorem!</p>
	</article>
  </section>
  <section class="section color5" data-letter="s">
	<article class="section__wrapper">
	  <h1 class="section__title">Sponsors</h1>
	  <p>Use your 'left' and 'right' arrow keys to navigate.<br> Autem alias perferendis facilis, quibusdam, ratione repellendus, voluptate officiis ipsa ullam magnam libero atque doloribus sunt est ea nisi iste porro excepturi.</p>
	</article>
  </section>
</div>

<script src='js/stopExecutionOnTimeout.js'></script>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
	var Nav = function () {
		var nav = $('.nav'), burger = $('.burger'), page = $('.page'), section = $('.section'), link = nav.find('.nav__link'), navH = nav.innerHeight(), isOpen = true, hasT = false;
		var toggleNav = function () {
			nav.toggleClass('nav--active');
			burger.toggleClass('burger--close');
			shiftPage();
		};
		var shiftPage = function () {
			if (!isOpen) {
				page.css({
					'transform': 'translateY(' + navH + 'px)',
					'-webkit-transform': 'translateY(' + navH + 'px)'
				});
				isOpen = true;
			} else {
				page.css({
					'transform': 'none',
					'-webkit-transform': 'none'
				});
				isOpen = false;
			}
		};
		var switchPage = function (e) {
			var self = $(this);
			var i = self.parents('.nav__item').index();
			var s = section.eq(i);
			var a = $('section.section--active');
			var t = $(e.target);
			if (!hasT) {
				if (i == a.index()) {
					return false;
				}
				a.addClass('section--hidden').removeClass('section--active');
				s.addClass('section--active');
				hasT = true;
				a.on('transitionend webkitTransitionend', function () {
					$(this).removeClass('section--hidden');
					hasT = false;
					a.off('transitionend webkitTransitionend');
				});
			}
			return false;
		};
		var keyNav = function (e) {
			var a = $('section.section--active');
			var aNext = a.next();
			var aPrev = a.prev();
			var i = a.index();
			if (!hasT) {
				if (e.keyCode === 37) {
					if (aPrev.length === 0) {
						aPrev = section.last();
					}
					hasT = true;
					aPrev.addClass('section--active');
					a.addClass('section--hidden').removeClass('section--active');
					a.on('transitionend webkitTransitionend', function () {
						a.removeClass('section--hidden');
						hasT = false;
						a.off('transitionend webkitTransitionend');
					});
				} else if (e.keyCode === 39) {
					if (aNext.length === 0) {
						aNext = section.eq(0);
					}
					aNext.addClass('section--active');
					a.addClass('section--hidden').removeClass('section--active');
					hasT = true;
					aNext.on('transitionend webkitTransitionend', function () {
						a.removeClass('section--hidden');
						hasT = false;
						aNext.off('transitionend webkitTransitionend');
					});
				} else {
					return;
				}
			}
		};
		var bindActions = function () {
			burger.on('click', toggleNav);
			link.on('click', switchPage);
			$(document).on('ready', function () {
				page.css({
					'transform': 'translateY(' + navH + 'px)',
					'-webkit-transform': 'translateY(' + navH + 'px)'
				});
			});
			$('body').on('keydown', keyNav);
		};
		var init = function () {
			bindActions();
		};
		return { init: init };
	}();
	Nav.init();
</script>

</body>
</html>

JS代码(stopExecutionOnTimeout.js):

"use strict";
	"object"!=typeof window.CP&&(window.CP={
}
),window.CP.PenTimer={
	programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{
}
,_loopTimers:{
}
,START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(o){
	this._loopExits[o]=!0}
,shouldStopLoop:function(o){
	if(this.programKilledSoStopMonitoring)return!0;
	if(this.programNoLongerBeingMonitored)return!1;
	if(this._loopExits[o])return!1;
	var t=this._getTime();
	if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=t,!1;
	var i=t-this.timeOfFirstCallToShouldStopLoop;
	if(i<this.START_MONITORING_AFTER)return!1;
	if(i>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;
	try{
	this._checkOnInfiniteLoop(o,t)}
catch(n){
	return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}
return!1}
,_sendErrorMessageToEditor:function(){
	try{
	if(this._shouldPostMessage()){
	var o={
	action:"infinite-loop",line:this._findAroundLineNumber()}
;
	parent.postMessage(JSON.stringify(o),"*")}
else this._throwAnErrorToStopPen()}
catch(t){
	this._throwAnErrorToStopPen()}
}
,_shouldPostMessage:function(){
	return document.location.href.match(/boomerang/)}
,_throwAnErrorToStopPen:function(){
	throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io."}
,_findAroundLineNumber:function(){
	var o=new Error,t=0;
	if(o.stack){
	var i=o.stack.match(/boomerang\S+:(\d+):\d+/);
	i&&(t=i[1])}
return t}
,_checkOnInfiniteLoop:function(o,t){
	if(!this._loopTimers[o])return this._loopTimers[o]=t,!1;
	var i=t-this._loopTimers[o];
	if(i>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop:"+o}
,_getTime:function(){
	return+new Date}
}
,window.CP.shouldStopExecution=function(o){
	return window.CP.PenTimer.shouldStopLoop(o)}
,window.CP.exitedLoop=function(o){
	window.CP.PenTimer.exitedLoop(o)}
;

CSS代码(styles.css):

*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(255,255,255,0);}
body{line-height:1.5;font-family:'Noto Sans';-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;color:#1a1a1a;background:#1a1a1a;}
a{text-decoration:none;color:inherit;}
ul{list-style-type:none;margin:0;padding:0;}
.nav{will-change:transform;position:fixed;top:0;left:0;width:100%;z-index:1;background:#1a1a1a;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all 0.45s cubic-bezier(0.23,1,0.32,1);transition:all 0.45s cubic-bezier(0.23,1,0.32,1);}
.nav--active{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
.nav__list{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.nav__item{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;position:relative;-webkit-transition:all 0.45s cubic-bezier(0.23,1,0.32,1);transition:all 0.45s cubic-bezier(0.23,1,0.32,1);}
.nav__item:hover{opacity:0.75;}
.nav__thumb{display:block;height:120px;background:#dc143c;-webkit-transition:all 0.45s cubic-bezier(0.23,1,0.32,1);transition:all 0.45s cubic-bezier(0.23,1,0.32,1);}
.nav__thumb:before{content:attr(data-letter);position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:70px;text-transform:uppercase;opacity:0.15;}
.nav__label{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-transform:uppercase;letter-spacing:2px;color:#1a1a1a;margin:0;}
@media (max-width:850px){.nav__label{font-size:14px;}
}
@media (max-width:720px){.nav__label{display:none;}
.nav__thumb{height:90px;}
.nav__thumb:before{font-size:32px;opacity:0.7;}
}
.burger{position:absolute;right:0;top:100%;width:60px;height:60px;background:#1a1a1a;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.burger__patty{position:relative;width:60%;height:2px;background:#fff;-webkit-transition:all 0.45s cubic-bezier(0.23,1,0.32,1);transition:all 0.45s cubic-bezier(0.23,1,0.32,1);}
.burger__patty:before,.burger__patty:after{will-change:transform;content:"";position:absolute;left:0;background:#fff;height:2px;width:100%;-webkit-transition:all 0.45s cubic-bezier(0.23,1,0.32,1);transition:all 0.45s cubic-bezier(0.23,1,0.32,1);}
.burger__patty:before{top:-10px;}
.burger__patty:after{top:10px;}
.burger--close .burger__patty{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
.burger--close .burger__patty:before{-webkit-transform:rotate(-90deg) translate(-9px,0);-ms-transform:rotate(-90deg) translate(-9px,0);transform:rotate(-90deg) translate(-9px,0);}
.burger--close .burger__patty:after{opacity:0;-webkit-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}
.page{height:100vh;will-change:transform;-webkit-perspective:400px;perspective:400px;overflow:hidden;-webkit-transition:all 0.45s cubic-bezier(0.23,1,0.32,1);transition:all 0.45s cubic-bezier(0.23,1,0.32,1);}
.section{will-change:transform;position:absolute;width:100%;top:0;left:0;height:100vh;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;background:#fff;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all 0.7s cubic-bezier(0.23,1,0.32,1);transition:all 0.7s cubic-bezier(0.23,1,0.32,1);}
.section--hidden{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}
.section--active{-webkit-transform:translateX(0) rotateY(0);transform:translateX(0) rotateY(0);z-index:2;}
.section:before{content:attr(data-letter);position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:75vh;text-transform:uppercase;opacity:0.15;z-index:-1;}
.section__wrapper{width:100%;max-width:800px;padding:0 8vw;}
.section__title{margin:0 0 25px 0;font-size:24px;text-transform:uppercase;letter-spacing:4px;}
.section p{margin:0 0 25px 0;font-family:'Georgia';font-size:20px;}
.section p:last-child{margin-bottom:0;}
.color1{background:#1abc9c;}
.color2{background:#e74c3c;}
.color3{background:#3498db;}
.color4{background:#f4d03f;}
.color5{background:#9b59b6;}
.color6{background:#bdc3c7;}
.logo{position:fixed;top:195px;right:7px;z-index:2;}
@media (max-width:720px){.logo{top:160px;}
}
.logo img{width:45px;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);-webkit-transition:all 0.45s cubic-bezier(0.23,1,0.32,1);transition:all 0.45s cubic-bezier(0.23,1,0.32,1);}
.logo img:hover{-webkit-transform:rotate(180deg) scale(1.1);-ms-transform:rotate(180deg) scale(1.1);transform:rotate(180deg) scale(1.1);}

附件:下载该文件资源,减少时间成本(增值服务)