html5全屏手风琴导航点击动画弹出层特效



167 665 222



特效描述:html5 全屏手风琴导航 点击动画 弹出层特效,html5手风琴导航,动画弹出层,全屏导航

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel='stylesheet prefetch' href='http://libs.useso.com/js/font-awesome/4.2.0/css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="css/styles.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

3. HTML代码

<section class="strips">
	<article class="strips__strip">
		<div class="strip__content">
			<h1 class="strip__title" data-name="Lorem">Awesome</h1>
			<div class="strip__inner-text">
				<h2>www.51qianduan.com</h2>
				<p>html5弹出层</p>
				<p><a href="#" target="_blank"><i class="fa fa-qq"></i></a></p>
			</div>
		</div>
	</article>
	<article class="strips__strip">
		<div class="strip__content">
			<h1 class="strip__title" data-name="Ipsum">Words</h1>
			<div class="strip__inner-text">
				<h2>Ettrics</h2>
				<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
				<p>来源:<a href="http://www.51qianduan.com/" target="_blank">www.51qianduan.com</a></p>
				<p><a href="#" target="_blank"><i class="fa fa-qq"></i></a></p>
			</div>
		</div>
	</article>
	<article class="strips__strip">
		<div class="strip__content">
			<h1 class="strip__title" data-name="Dolor">Go</h1>
			<div class="strip__inner-text">
				<h2>Ettrics</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p>
				<p><a href="#" target="_blank"><i class="fa fa-weibo"></i></a></p>
			</div>
		</div>
	</article>
	<article class="strips__strip">
		<div class="strip__content">
			<h1 class="strip__title" data-name="Sit">Inside</h1>
			<div class="strip__inner-text">
				<h2>Ettrics</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p>
				<p><a href="#" target="_blank"><i class="fa fa-weixin"></i></a></p>
			</div>
		</div>
	</article>
	<article class="strips__strip">
		<div class="strip__content">
			<h1 class="strip__title" data-name="Amet">Here</h1>
			<div class="strip__inner-text">
				<h2>Ettrics</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p>
				<p><a href="#" target="_blank"><i class="fa fa-leaf"></i></a></p>
			</div>
		</div>
	</article>
	<i class="fa fa-close strip__close"></i>
</section>
<script type="text/javascript">
var Expand = function () {
	var tile = $('.strips__strip');
	var tileLink = $('.strips__strip > .strip__content');
	var tileText = tileLink.find('.strip__inner-text');
	var stripClose = $('.strip__close');
	var expanded = false;
	var open = function () {
		var tile = $(this).parent();
		if (!expanded) {
			tile.addClass('strips__strip--expanded');
			tileText.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
			stripClose.addClass('strip__close--show');
			stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
			expanded = true;
		}
	};
	var close = function () {
		if (expanded) {
			tile.removeClass('strips__strip--expanded');
			tileText.css('transition', 'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)');
			stripClose.removeClass('strip__close--show');
			stripClose.css('transition', 'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)');
			expanded = false;
		}
	};
	var bindActions = function () {
		tileLink.on('click', open);
		stripClose.on('click', close);
	};
	var init = function () {
		bindActions();
	};
	return { init: init };
}();
Expand.init();
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动导航菜单 右键菜单 图片全屏 html5动画导航菜单 滑动选项卡切换 文字提示框 文字全屏 html5图片动画 图片滑动 提示框/弹出层 360全景 html5文字动画 文字滑动 layer html5表情动画 滑动手风琴 lightbox html5线条动画 滑动星星打分 Tooltip工具提示框 浮动提示框 html5飘落动画 html5弹窗动画 html5光标动画 html5悬停动画 滑动滑过 加载动画 弹出层拖动 窗口提示框 全屏焦点图 html5弹窗动画 全屏切换 宽屏全屏满屏 html5动画h5动画 html5按钮动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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