jquery图片分类筛选动画选项卡切换和点击图片放大查看



155 618 207



特效描述:图片分类筛选 动画选项卡切换 点击图片放大,

代码结构

1. 引入CSS

<link type="text/css" href="css/styles.css" rel="stylesheet" media="all" />
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.quicksand.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>

3. HTML代码

<div class="wrapper">
	<div class="portfolio-content">	
		<ul class="portfolio-categ filter">
			<li>选择分类:</li>
			<li class="all active"><a href="#">All</a></li>
			<li class="cat-item-1"><a href="#" title="Category 1">分类 1</a></li>
			<li class="cat-item-2"><a href="#" title="Category 2">分类 2</a></li>
			<li class="cat-item-3"><a href="#" title="Category 3">分类 3</a></li>
			<li class="cat-item-4"><a href="#" title="Category 4">分类 4</a></li>
			<li class="cat-item-5"><a href="#" title="Category 5">分类 5</a></li>
		</ul>
		<ul class="portfolio-area">	
			<li class="portfolio-item2" data-id="id-0" data-type="cat-item-1">	
				<div>
					<span class="image-block">
						<a class="image-zoom" href="images/big/b1.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张"><img width="225" height="140" src="images/thumbs/1.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" /></a>
					</span>
					<div class="home-portfolio-text">
						<h2 class="post-title-portfolio"><a href="#">第九站长</a></h2>
						<p class="post-subtitle-portfolio">www.dijiuzhanzhang.com</p>
					</div>
				</div>	
			</li>			
			<li class="portfolio-item2" data-id="id-1" data-type="cat-item-2">	
				<div>
					<span class="image-block">
						<a class="image-zoom" href="images/big/b2.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张"><img width="225" height="140" src="images/thumbs/2.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" /></a>
					</span>
					<div class="home-portfolio-text">
						<h2 class="post-title-portfolio"><a href="#">第九站长</a></h2>
						<p class="post-subtitle-portfolio">www.dijiuzhanzhang.com</p>
					</div>
				</div>	
			</li>				
			<li class="portfolio-item2" data-id="id-2" data-type="cat-item-2">	
				<div>
					<span class="image-block">
						<a class="image-zoom" href="images/big/b3.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张"><img width="225" height="140" src="images/thumbs/3.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" /></a>
					</span>
					<div class="home-portfolio-text">
						<h2 class="post-title-portfolio"><a href="#">第九站长</a></h2>
						<p class="post-subtitle-portfolio">www.dijiuzhanzhang.com</p>
					</div>
				</div>	
			</li>		
			<li class="portfolio-item2" data-id="id-3" data-type="cat-item-3">	
				<div>
					<span class="image-block">
						<a class="image-zoom" href="images/big/b4.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张"><img width="225" height="140" src="images/thumbs/4.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" /></a>
					</span>
					<div class="home-portfolio-text">
						<h2 class="post-title-portfolio"><a href="#">第九站长</a></h2>
						<p class="post-subtitle-portfolio">www.dijiuzhanzhang.com</p>
					</div>
				</div>	
			</li>			
			<li class="portfolio-item2" data-id="id-4" data-type="cat-item-3">	
				<div>
					<span class="image-block">
						<a class="image-zoom" href="images/big/b5.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张"><img width="225" height="140" src="images/thumbs/5.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" /></a>
					</span>
					<div class="home-portfolio-text">
						<h2 class="post-title-portfolio"><a href="#">第九站长</a></h2>
						<p class="post-subtitle-portfolio">www.dijiuzhanzhang.com</p>
					</div>
				</div>	
			</li>			
			<li class="portfolio-item2" data-id="id-5" data-type="cat-item-5">	
				<div>
					<span class="image-block">
						<a class="image-zoom" href="images/big/b6.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张"><img width="225" height="140" src="images/thumbs/6.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" /></a>
					</span>
					<div class="home-portfolio-text">
						<h2 class="post-title-portfolio"><a href="#">第九站长</a></h2>
						<p class="post-subtitle-portfolio">www.dijiuzhanzhang.com</p>
					</div>
				</div>	
			</li>			
			<li class="portfolio-item2" data-id="id-6" data-type="cat-item-4">	
				<div>
					<span class="image-block">
						<a class="image-zoom" href="images/big/b7.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张"><img width="225" height="140" src="images/thumbs/7.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" /></a>
					</span>
					<div class="home-portfolio-text">
						<h2 class="post-title-portfolio"><a href="#">第九站长</a></h2>
						<p class="post-subtitle-portfolio">www.dijiuzhanzhang.com</p>
					</div>
				</div>	
			</li>
			<li class="portfolio-item2" data-id="id-7" data-type="cat-item-4">	
				<div>
					<span class="image-block">
						<a class="image-zoom" href="images/big/b8.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张"><img width="225" height="140" src="images/thumbs/8.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" /></a>
					</span>
					<div class="home-portfolio-text">
						<h2 class="post-title-portfolio"><a href="#">第九站长</a></h2>
						<p class="post-subtitle-portfolio">www.dijiuzhanzhang.com</p>
					</div>
				</div>	
			</li>			
			<li class="portfolio-item2" data-id="id-8" data-type="cat-item-3">	
				<div>
					<span class="image-block">
						<a class="image-zoom" href="images/big/b9.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张"><img width="225" height="140" src="images/thumbs/9.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" /></a>
					</span>
					<div class="home-portfolio-text">
						<h2 class="post-title-portfolio"><a href="#">第九站长</a></h2>
						<p class="post-subtitle-portfolio">www.dijiuzhanzhang.com</p>
					</div>
				</div>	
			</li>			
			<li class="portfolio-item2" data-id="id-9" data-type="cat-item-3">	
				<div>
					<span class="image-block">
						<a class="image-zoom" href="images/big/b10.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张"><img width="225" height="140" src="images/thumbs/10.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" />                    
						</a>
					</span>
					<div class="home-portfolio-text">
						<h2 class="post-title-portfolio"><a href="#">第九站长</a></h2>
						<p class="post-subtitle-portfolio">www.dijiuzhanzhang.com</p>
					</div>
				</div>	
			</li>			            
			<li class="portfolio-item2" data-id="id-10" data-type="cat-item-5">	
				<div>
					<span class="image-block">
						<a class="image-zoom" href="images/big/b11.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张"><img width="225" height="140" src="images/thumbs/11.jpg" alt="Wall-E" />                    
						</a>
					</span>
					<div class="home-portfolio-text">
						<h2 class="post-title-portfolio"><a href="#">第九站长</a></h2>
						<p class="post-subtitle-portfolio">www.dijiuzhanzhang.com</p>
					</div>
				</div>	
			</li>	
			<li class="portfolio-item2" data-id="id-11" data-type="cat-item-1">	
				<div>
					<span class="image-block">
						<a class="image-zoom" href="images/big/b12.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张"><img width="225" height="140" src="images/thumbs/12.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" /></a>
					</span>
					<div class="home-portfolio-text">
						<h2 class="post-title-portfolio"><a href="#">第九站长</a></h2>
						<p class="post-subtitle-portfolio">www.dijiuzhanzhang.com</p>
					</div>
				</div>	
			</li>
		</ul><!--end portfolio-area -->
		<div class="column-clear"></div>
	</div><!--end portfolio-content -->	
</div><!-- end wrapper -->  



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


热门标签: 右键菜单 html5动画导航菜单 文字提示框 html5图片动画 提示框/弹出层 html5文字动画 layer html5表情动画 lightbox html5线条动画 Tooltip工具提示框 浮动提示框 html5飘落动画 html5弹窗动画 html5光标动画 html5悬停动画 加载动画 弹出层拖动 窗口提示框 html5弹窗动画 html5动画h5动画 html5按钮动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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