html5全屏响应式tab滑动选项卡切换特效



167 666 223



特效描述: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

加群请备注:从官网了解到