html5全屏网格响应式布局点击弹出窗口切换特效



234 932 311



特效描述:html5 全屏网格 响应式布局 点击弹出窗口 切换特效,html5点击窗格弹开收起特效,全屏网格布局,响应式布局。

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/component.css" />

2. 引入JS

<script src="js/modernizr.custom.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/boxlayout.js"></script>

3. HTML代码

		<div class="container">	
			<div id="bl-main" class="bl-main">
				<section>
					<div class="bl-box">
						<h2 class="bl-icon bl-icon-about">About</h2>
					</div>
					<div class="bl-content">
						<h2>About this layout</h2>
						<p>This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.</p>
					</div>
					<span class="bl-icon bl-icon-close"></span>
				</section>
				<section id="bl-work-section">
					<div class="bl-box">
						<h2 class="bl-icon bl-icon-works">Works</h2>
					</div>
					<div class="bl-content">
						<h2>My Works</h2>
						<p>Mung bean maize dandelion sea lettuce catsear bunya nuts ricebean tatsoi caulie horseradish pea.</p>
						<ul id="bl-work-items">
							<li data-panel="panel-1"><a href="#"><img src="images/1.jpg" /></a></li>
							<li data-panel="panel-2"><a href="#"><img src="images/2.jpg" /></a></li>
							<li data-panel="panel-3"><a href="#"><img src="images/3.jpg" /></a></li>
							<li data-panel="panel-4"><a href="#"><img src="images/4.jpg" /></a></li>
						</ul>
						<p>Illustrations by <a href="http://dribbble.com/isaac317/click">Isaac Montemayor</a></p>
					</div>
					<span class="bl-icon bl-icon-close"></span>
				</section>
				<section>
					<div class="bl-box">
						<h2 class="bl-icon bl-icon-blog">Blog</h2>
					</div>
					<div class="bl-content">
						<h2>My Musings</h2>
						<article>
							<h3>Being a Freelance Designer</h3>
							<p>Stumptown helvetica cardigan, odd future seitan tattooed flannel. Kale chips direct trade cray beard. 8-bit etsy butcher post-ironic blog lo-fi mcsweeney's, sustainable pickled umami flexitarian DIY ethical plaid trust fund. Wolf cred organic, terry richardson aesthetic four loko occupy vegan chillwave readymade deep... <a href="#">Read more</a></p>
						</article>
						<article>
							<h3>Working with Photoshop</h3>
							<p>Cosby sweater odd future gluten-free actually dreamcatcher. Fixie cray vice sriracha disrupt, lo-fi pitchfork mcsweeney's swag YOLO meh chambray etsy. Keytar sriracha fanny pack church-key hashtag vice blog. 3 wolf moon VHS helvetica, raw denim deep v shoreditch seitan twee... <a href="#">Read more</a></p>
						</article>
						<article>
							<h3>Making use of Icon Fonts</h3>
							<p>Locavore irony gastropub chillwave, butcher meggings flexitarian pinterest master cleanse godard. Intelligentsia pop-up neutra, williamsburg gastropub godard pinterest swag deep v umami lomo. Butcher next level 90's wolf bushwick, narwhal photo booth YOLO kale chips whatever small batch. Meh viral ethical hella cardigan portland, street art mlkshk meggings mixtape kale chips cliche messenger bag pitchfork... <a href="#">Read more</a></p>
						</article>
						<article>
							<h3>Being a Freelance Designer</h3>
							<p>Stumptown helvetica cardigan, odd future seitan tattooed flannel. Kale chips direct trade cray beard. 8-bit etsy butcher post-ironic blog lo-fi mcsweeney's, sustainable pickled umami flexitarian DIY ethical plaid trust fund. Wolf cred organic, terry richardson aesthetic four loko occupy vegan chillwave readymade deep... <a href="#">Read more</a></p>
						</article>
						<article>
							<h3>Working with Photoshop</h3>
							<p>Cosby sweater odd future gluten-free actually dreamcatcher. Fixie cray vice sriracha disrupt, lo-fi pitchfork mcsweeney's swag YOLO meh chambray etsy. Keytar sriracha fanny pack church-key hashtag vice blog. 3 wolf moon VHS helvetica, raw denim deep v shoreditch seitan twee... <a href="#">Read more</a></p>
						</article>
						<article>
							<h3>Making use of Icon Fonts</h3>
							<p>Locavore irony gastropub chillwave, butcher meggings flexitarian pinterest master cleanse godard. Intelligentsia pop-up neutra, williamsburg gastropub godard pinterest swag deep v umami lomo. Butcher next level 90's wolf bushwick, narwhal photo booth YOLO kale chips whatever small batch. Meh viral ethical hella cardigan portland, street art mlkshk meggings mixtape kale chips cliche messenger bag pitchfork... <a href="#">Read more</a></p>
						</article>
					</div>
					<span class="bl-icon bl-icon-close"></span>
				</section>
				<section>
					<div class="bl-box">
						<h2 class="bl-icon bl-icon-contact">Contact</h2>
					</div>
					<div class="bl-content">
						<h2>Get in touch</h2>
						<p>Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch. Occupy american apparel freegan cliche. Mustache trust fund 8-bit jean shorts mumblecore thundercats. Pour-over small batch forage cray, banjo post-ironic flannel keffiyeh cred ethnic semiotics next level tousled fashion axe. Sustainable cardigan keytar fap bushwick bespoke.</p>
					</div>
					<span class="bl-icon bl-icon-close"></span>
				</section>
				<!-- Panel items for the works -->
				<div class="bl-panel-items" id="bl-panel-work-items">
					<div data-panel="panel-1">
						<div>
							<img src="images/1.jpg" />
							<h3>Fixie bespoke</h3>
							<p>Iphone artisan direct trade ethical Austin. Fixie bespoke banh mi ugh, deep v vinyl hashtag. Tumblr gentrify keffiyeh pop-up iphone twee biodiesel. Occupy american apparel freegan cliche. Mustache trust fund 8-bit jean shorts mumblecore thundercats. Pour-over small batch forage cray, banjo post-ironic flannel keffiyeh cred ethnic semiotics next level tousled fashion axe. Sustainable cardigan keytar fap bushwick bespoke.</p>
						</div>
					</div>
					<div data-panel="panel-2">
						<div>
							<img src="images/2.jpg" />
							<h3>Chillwave mustache</h3>
							<p>Squid vinyl scenester literally pug, hashtag tofu try-hard typewriter polaroid craft beer mlkshk cardigan photo booth PBR. Chillwave 90's gentrify american apparel carles disrupt. Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch.</p>
						</div>
					</div>
					<div data-panel="panel-3">
						<div>
							<img src="images/3.jpg" />
							<h3>Austin hella</h3>
							<p>Ethical cray wayfarers leggings vice, seitan banksy small batch ethnic master cleanse. Pug chillwave etsy, scenester meh occupy blue bottle tousled blog tonx pinterest selvage mixtape swag cosby sweater. Synth tousled direct trade, hella Austin craft beer ugh chambray.</p>
						</div>
					</div>
					<div data-panel="panel-4">
						<div>
							<img src="images/4.jpg" />
							<h3>Brooklyn dreamcatcher</h3>
							<p>Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO. Wes anderson lomo 90's food truck 3 wolf moon, twee jean shorts. Iphone small batch twee wolf yr before they sold out. Brooklyn echo park cred, portland pug selvage flannel seitan tousled mcsweeney's.</p>
						</div>
					</div>
					<nav>
						<span class="bl-next-work">&gt; Next Project</span>
						<span class="bl-icon bl-icon-close"></span>
					</nav>
				</div>
			</div>
		</div><!-- /container -->
		<script>
			$(function() {
				Boxlayout.init();
			});
		</script>



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


热门标签: 图片叠加 图片层叠 图片延迟加载 图片延迟 图片加载 图片翻转 图片旋转 图片全屏 图片放大镜 头像上传 图片上传 图片拖动 图片拖拽 图片淡出淡进 图片淡出 图片淡进 二维码 地图 中国地图 世界地图 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 h5图片动画 h5图标动画 html5图片动画 html5图标动画 图片广告 滚动切换 滚动条切换 滑动选项卡 滑动切换 带缩略图的幻灯片 旋转木马 图片旋转木马 文字旋转木马 旋转木马插件 图片滑动 图片滑块 纯图片轮播 图片轮播 图片收缩展开 图片收缩 图片展开 图片切换 图片选项卡 图标选项卡 图片滚动 图片滚动条 图标导航 图标菜单 自动滚动图片轮播 弹出层拖动 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 背景切换 大图切换 滑动手风琴 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 全屏焦点图 滑动星星打分 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 全屏切换 切换按钮 宽屏全屏 宽屏 全屏 页面全屏 页面宽屏 表单 表单美化 表单插件 表单美化插件 图表 图片 图片插件 头像截图 其他 响应式区块列表布局 图片全屏 提示框/弹出层 背景切换 大图切换 图片网格 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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