html5全屏響應式tab滑動選項卡切換特效



174 692 231



特效描述:html5 全屏 響應式tab滑動選項卡 切換特效,html5 tab,響應式選項卡,全屏切換,html5選項卡

代碼結構

1. 引入CSS

<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">

2. 引入JS

<script type="text/javascript" src='js/stopExecutionOnTimeout.js'></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>

3. HTML代碼

<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">
		<header class="htmleaf-header">
			<h1>支持鍵盤控制的扁平風格水平滑動Tab選項卡 <span></span></h1>
		</header>
	</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>
	<section class="section color6" data-letter="c">
		<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 type="text/javascript">
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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滑動選項卡 滑動切換 滾動切換 滾動條切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 全屏焦點圖 收縮展開 展開收縮 收縮 展開 全屏切換 切換按鈕 寬屏全屏 寬屏 全屏 頁面全屏 頁面寬屏 表單 表單美化 表單插件 表單美化插件 收縮菜單 收縮導航 圖片全屏 圖片滑動 圖片滑塊 圖片切換 圖片選項卡 圖標選項卡 選項卡自動切換 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子