利用jquery实现网格视图切换



37 147 50



特效描述:利用jquery实现 网格 视图切换,利用jquery实现网格视图切换

代码结构

1. 引入CSS

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

2. 引入JS

<script src="js/modernizr.custom.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/appshowcase.js"></script>

3. HTML代码

		<div class="container">	
			<header class="clearfix">
				<div class="inner">
					<nav class="codrops-demos">
						<a class="current-demo" href="index.html">Demo 1</a>
						<a href="index2.html">Demo 2</a>
						<a href="index3.html">Demo 3</a>
					</nav>
				</div>
			</header>
			<div class="main">
				<div id="ac-wrapper" class="ac-wrapper">
					<h2>Weatherous <span>概念 &amp; UI设计</span></h2>
					<div class="ac-device">
						<a href="#"><img src="images/screen1.jpg"/></a>
					</div>
					<div class="ac-grid">
						<a href="#"><img src="images/screen1.jpg"/><span>Gentrify 
						small batch umami retro vegan</span></a>
						<a href="#"><img src="images/screen2.jpg"/><span>Chambray 
						squid semiotics</span></a>
						<a href="#"><img src="images/screen3.jpg"/><span>Fashion 
						axe blue bottle</span></a>
						<a href="#"><img src="images/screen4.jpg"/><span>Photo 
						booth single-origin coffee</span></a>
						<a href="#"><img src="images/screen5.jpg"/><span>Flexitarian 
						synth keytar blog master</span></a>
						<a href="#"><img src="images/screen6.jpg"/><span>Next 
						level retro flexitarian freegan</span></a>
						<a href="#"><img src="images/screen7.jpg"/><span>Pour-over 
						superious meggings terry</span></a>
						<a href="#"><img src="images/screen8.jpg"/><span>Seitan 
						william vinyl chillwave</span></a>
					</div>
				</div>		
			</div>
		</div><!-- /container -->
		<script>
			$(function() {
				AppShowcase.init();
			});
		</script>
<div style="text-align:center;clear:both">
</div>



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


热门标签: 导航切换 图片切换 文字切换 背景切换 手风琴 选项卡自动切换 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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